Tag: Safari
ios8中的Safari是固定的元素获得焦点时的滚动屏幕
在IOS8 Safari中有一个固定位置的新bug。 如果您将焦点放在固定面板中的textarea，safari会将您滚动到页面的底部。 这使得各种用户界面无法使用，因为你没有办法input文本到textareas没有滚动页面一路下降，失去你的地方。 有没有办法彻底解决这个bug？ #a { height: 10000px; background: linear-gradient(red, blue); } #b { position: fixed; bottom: 20px; left: 10%; width: 100%; height: 300px; } textarea { width: 80%; height: 300px; } <html> <body> <div id="a"></div> <div id="b"><textarea></textarea></div> </body> </html>
某些字体大小在Safari（iPhone）上呈现较大
有没有CSS或其他原因为什么Safari / iPhone会忽略一些字体大小的设置？ 在我的特定网站上，iPhone上的Safari呈现一些font-size：13px文本大于font-size：15px文本。 它可能不支持一些元素的字体大小？
iOS的Safari – 如何禁用overscroll，但允许可滚动的div正常滚动？
我正在开发基于iPad的networking应用程序，并且需要防止过度滚动，使其看起来不像网页。 我目前正在使用这个来冻结视口并禁用overscroll： document.body.addEventListener('touchmove',function(e){ e.preventDefault(); }); 这很好地禁用overscroll，但我的应用程序有几个可滚动的div， 上面的代码阻止他们滚动 。 我只针对iOS 5及以上版本，所以我避免了像iScroll这样的hacky解决scheme。 相反，我正在使用这个CSS滚动div： .scrollable { -webkit-overflow-scrolling: touch; overflow-y:auto; } 这工作没有文件overscroll脚本，但不解决div滚动问题。 没有jQuery插件，有没有办法使用overscroll修复，但免除我的$（'。scrollable'）div？ 编辑： 我发现这是一个体面的解决scheme： // Disable overscroll / viewport moving on everything but scrollable divs $('body').on('touchmove', function (e) { if (!$('.scrollable').has($(e.target)).length) e.preventDefault(); }); 当您滚动div的开头或结尾时，视口仍会移动。 我想find一种方法来禁用，以及。
在Safari中隐藏textarea调整句柄
我在我的应用程序中使用textarea组件，并且我dynamic地控制它们的高度。 当用户键入时，只要有足够的文本，高度就会增加。 这在IE，Firefox和Safari上运行良好。 但是，在Safari中，右下方有一个“句柄”工具，允许用户通过点击和拖动来调整textarea的大小。 我也注意到这个问题与textarea在stackoverflow问一个问题页面。 这个工具令人困惑，基本上是阻碍。 那么，是否有隐藏这个resize的句柄？ （我不确定“处理”是否正确，但我想不出一个更好的术语。）
在Safari 10中旋转时，SVG会改变颜色
我刚刚遇到一个非常奇怪的问题，只在Safari 10中出现。我有玩纸牌，svg图像，有时使用transform:rotate(xdeg) 。 我正在使用的卡有一个红色块模式。 当它没有旋转，或以直angular旋转，即90,180,270，那么它看起来很正常。 但是，除此之外的任何angular度和背景图案变成蓝色！ 我刚刚从我的一个用户那里得到了一个这样的报告，从来没有看到任何奇怪的东西。 其他浏览器一切正常，Safari 9正常。 我猜这只是Safari 10中一个非常奇怪的错误，但是有关如何解决它的任何想法？ 我已经创build了一个最小的repro： https://jsfiddle.net/2zv4garu/1/
移除移动Safari（iPhone）上的textarea内部阴影
默认情况下，Mobile Safari似乎将顶部的内部阴影添加到所有的input字段，包括textarea。 有没有办法删除它？ 当你有一个白色的背景是特别丑陋的。
iOS 8删除了“minimal-ui”视口属性，还有其他“软全屏”解决scheme吗？
（这是一个多部分的问题，我会尽我所能来总结情况。） 我们目前正在构build一个响应式Web应用程序（新闻阅读器），允许用户在选项卡式内容之间滑动，并在每个选项卡式内容中垂直滚动。 解决这个问题的一个常见方法是使用一个包装器div来填充浏览器视口，将overflow设置为hidden或auto ，然后在其内部水平和/或垂直滚动。 这种方法很好，但有一个主要缺点： 由于文档的高度与浏览器视口完全相同，因此移动浏览器不会隐藏地址栏/导航菜单 。 有许多黑客和视口属性 ，使我们能够获得更多的屏幕空间，但没有一个是相当有效的minimal-ui （在iOS 7.1中引入）。 昨天的消息传出，iOS 8 beta4已经从Mobile Safari中删除了minimal-ui （请参阅iOS 8发行说明中的 Webkit部分），这让我们感到疑惑： Q1。 是否仍然可以隐藏移动Safari的地址栏？ 据我们所知，iOS 7 不再响应 window.scrollTo hack，这意味着除非我们采用垂直布局或使用支持mobile-web-app-capable ，否则我们不得不使用较小的屏幕空间。 Q2。 还有可能有一个类似的软全屏体验？ 通过软全屏，我真正的意思是不使用mobile-web-app-capable元标记。 我们的networking应用程序构build为可访问的，任何页面都可以使用本机浏览器菜单添加书签或共享。 通过添加mobile-web-app-capable我们阻止用户调用这个菜单（当它被保存到主屏幕），这迷惑和对抗用户。 minimal-ui曾经是中间地带，默认情况下隐藏了菜单，但是通过点击来保持菜单的可用性 – 尽pipe苹果公司可能由于其他可访问性问题而将其删除（例如，用户不知道在哪里点击来激活菜单） 。 Q3。 是一个全屏幕的经验值得麻烦？ 看起来， 全屏API不会很快来到iOS，但即使是这样，我也不会看到菜单如何保持可访问（Android上的Chrome也是如此）。 在这种情况下，也许我们应该只保留移动Safari浏览器，并考虑视口高度（对于iPhone 5+，它是460 = 568 – 108，其中108包括操作系统栏，地址栏和导航菜单; iPhone 4或年纪大了，372）。 很想听到一些替代品（除了build立一个本地的应用程序）。
如何使用jQuery在Safari浏览器中识别touch事件？ 可能吗？
是否有可能使用jQuery识别iPad的Safari浏览器上的触摸事件？ 我在web应用程序中使用了mouseOver和mouseOut事件。 有没有像iPad的Safari浏览器类似的事件，因为没有像mouseOut，mouseMove事件？
screenX / Y，clientX / Y和pageX / Y有什么区别？
screenX / Y，clientX / Y和pageX / Y有什么区别？ 也为iPad的Safari，计算是类似的桌面或有一些区别，因为视口？ 如果你能指点我一个例子，那将是非常棒的。
Mac / Safari上的字体重量变轻
在我的最后一个网站上，这个文本在Chrome和Firefox上自然是完美的，没有触及字体平滑或其他任何东西。 但是在Mac / Safari 7上，文字显得很好，然后变得更细（太薄/不好看）。 在做了一些研究之后[cf http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/] 和一些testing玩 -webkit-font-smoothing 它看起来像Safari首先显示文本： -webkit-font-smoothing: subpixel-antialiased; 然后，当你得到闪烁的效果，当它是字体转向： -webkit-font-smoothing: antialiased; 所以在我看来，我别无select，只能强迫 -webkit-font-smoothing: subpixel-antialiased; 使我的网站在所有浏览器上保持一致。 我正在使用字体Avenir Std Roman。 对Safari的问题的一些解释？ 有更好的解决scheme 我的字体能成为问题的一部分吗？ 谢谢。
