iOS 9 Safari : changing an element to fixed position while scrolling won't paint until scroll stops

Question

我一直在开发网站并利用相当不错的 jQuery Sticky Kit插入。它通过将 position 属性切换为 fixed 并在适当的时候返回来运行。在桌面上运行非常流畅，在移动设备上也可以接受。

或者至少它曾经是。 iOS 9 带来了一个新行为:如果元素的 position 从 static/relative/absolute 变为已修复 当滚动动画正在进行时，元素变得不可见，直到滚动停止。奇怪的是，相反的更改(从 fixed 到其他任何内容)执行没有问题。

可以在 the plugin's homepage 上找到一个工作示例.黑色导航栏(“示例引用”)应该是粘性的。最初它是 static 位于页面中间。当您向下滚动时，它会变为 fixed 并且(在 iOS 9 中)会消失，直到滚动停止。在桌面浏览器和 iOS 8 中的行为是正确的。

我有点希望典型的 CSS 变通办法:强制 3D 转换、禁用背面可见性等、隐藏专有属性……但似乎没有任何效果。

我们是否即将完全忘记“可粘贴”元素，因为它正在发挥作用？

Answer 1

我遇到了同样的问题，并且能够使用旧的“强制 3D 变换”技巧来破解它。只需将要切换位置的元素设置为具有 translate3d(0px,0px,0px) 的转换属性。确保在更改位置属性之前完成此操作。