iOS 9 Safari：将元素更改为固定位置，而滚动停止时不会绘制
我一直在开发一个网站，并利用相当不错的jQuery Sticky Kit插件。 它通过将position属性切换为fixed并在适当的时候返回来操作。 在桌面上运行得非常顺利，在手机上运行得也很好。
或者至less它曾经。 iOS 9带有一个新的行为：如果元素的position从static / relative / absolute变为fixed而滚动animation正在进行，元素在滚动停止之前变为不可见。 奇怪的是，相反的变化（从fixed到其他任何）都没有问题。
一个工作示例可以在插件的主页上find。 黑色导航栏（“示例参考”）应该是粘性的。 最初它static位于页面中间。 当你向下滚动它变得fixed并（在iOS 9）消失，直到滚动停止。 桌面浏览器和iOS 8中的行为是正确的。
我很希望有一个典型的CSS解决方法：强制3D变换，禁用背面可见性等，掩盖专有属性，…但似乎没有任何工作。
现在我们要完全忘记“粘性”元素吗？
我有这个相同的问题，并能够使用旧的“强制3D变换”技巧破解它。 只需设置要切换位置的元素，以便具有translate3d(0px,0px,0px)的transform属性。 确保在位置属性更改之前完成此操作。
我发现正确工作的唯一解决scheme是禁用固定项目的直接子项的z-index转换，例如：
.is-sticky > * { -webkit-transform: translateZ(0); }
我用一个额外的固定元素解决了这个问题。 经过一些testing后，我发现它是第一个被修复的元素有这个问题。 第二，第三等在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规范的一部分，并受到所有主stream浏览器的支持，因此我认为解决此问题的最佳方法是使用polyfill而不是插件。 当然，一个polyfill不会涵盖这些插件提供的所有function和function。 尽pipe如此，在许多情况下，使用polyfill可以完成这项工作，作为所有主stream浏览器支持的强大而有效的解决scheme。 在我看来，现在是要走的路。 我个人使用stickyfill，虽然我相信野外的其他polyfill会做的伎俩。 我只能说，因为我开始使用polyfill而不是插件，所以我没有任何浏览器兼容性问题。
将此添加到您的固定元素
使用混合： @include transform(translate3d(0px,0px,0px))
使用CSS： translate3d(0px,0px,0px)
