iOS 9 Safari：在滚动时将元素更改为固定位置直到滚动停止才会绘制

我一直在开发网站，并从相当不错的jQuery Sticky Kit插件中受益。通过在适当的时候在position属性之间fixed来回切换来进行操作。在桌面上运行非常流畅，在移动设备上也可以接受。

或至少它曾经如此。iOS 9具有新的行为：如果position元素的元素从static/ relative/absolute变为fixed滚动动画进行中，则元素将不可见，直到滚动停止为止。奇怪的是，执行相反的更改（从fixed其他更改）没有问题。

一个有效的示例可以在插件的主页上找到。黑色导航栏（“示例参考”）应该是粘性的。最初它static位于页面中间。向下滚动时，它变成fixed和（在iOS 9中）消失，直到滚动停止。在桌面浏览器和iOS 8中的行为是正确的。

我有点希望采用典型的CSS解决方法：强制进行3D转换，禁用背面可见性等，使专有属性晦涩难懂，但是似乎没有任何效果。

既然它正在起作用，我们是否会完全忘记“可粘”元素？

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

我发现可以正常工作的唯一解决方案是在固定项目的直接子项上禁用z-index翻译，例如：

.is-sticky > * {
    -webkit-transform: translateZ(0);
}

我用一个额外的固定元件解决了这个问题。经过一番测试，我发现这是第一个被修复的元素存在此问题。第二，第三等在iOS设备上可以正常工作。

因此，在您的身体开口后贴上div.fixed-fix：

.fixed-fix {
    position:fixed;
    top:-1px; 
    height:1px; 
    width:100%; 
    background:white;
}

现在可以了！固定分辨率div必须具有backgroundcolor，否则将无法工作...

jQuery Sticky Kit和其他类似的插件，即使编写得很好，也正在iOS 9上表现出这种行为，这并不是第一次发生这种情况。这里的要点是Firefox Safari和Safari Mobile支持实验性功能position: sticky;，谷歌（Chromium）也支持实验性功能，但是由于集成问题，不得不暂时禁用它，您可以在此处阅读更多信息。话虽如此，我的猜测是很快position: sticky;将成为CSS规范的一部分，并得到所有主要浏览器的支持，因此，我认为解决此问题的最佳方法是使用polyfill而不是插件。当然，polyfill不会涵盖这些插件提供的所有功能。不过，在许多情况下，使用polyfill可以完成所有主要浏览器支持的强大而有效的解决方案。我认为这是目前的路要走。我个人使用stickyfill，尽管我确信野外的其他polyfills可以解决问题。我只能说，由于我开始使用polyfill而不是插件，因此我没有任何浏览器兼容性问题。

使用混合： 使用CSS将其添加到固定元素中@include transform(translate3d(0px,0px,0px))
： translate3d(0px,0px,0px)