CSS iOS 9 Safari：滚动时将元素更改为固定位置直到滚动停止才会绘制
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32875046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops
提问by randombumper
I've been developing a site and taking advantage from the rather good jQuery Sticky Kitplugin. It operates by switching the positionproperty to fixedand back when appropriate. Runs very smoothly in desktop and acceptably so in mobile.
我一直在开发一个网站并利用相当不错的jQuery Sticky Kit插件。它通过在适当的时候来回切换position属性来运行fixed。在桌面上运行非常流畅，在移动设备上也可以接受。
Or at least it used to. iOS 9 comes with a new behavior: if the positionof an element changes from static/relative/absoluteto fixedwhile the scroll animation is ongoing the element becomes invisible until after the scroll has come to a stop. Oddly enough the opposite change (from fixedto whatever else) is performed without issues.
或者至少它曾经如此。iOS版9配备了一个新的行为：如果position一个元素的改变从static/ relative/absolute到fixed时滚动动画正在进行的元素变得不可见，直到滚动已经停下来了。奇怪的是，相反的变化（从fixed其他任何变化）都没有问题。
A working example can be found on the plugin's homepage. The black navigation bar ("Examples Reference") is supposed to be sticky. Originally it's staticly positioned in mid-page. As you scroll down it becomes fixedand (in iOS 9) disappears until scroll stops. Behavior in desktop browsers and iOS 8 is correct.
可以在插件的主页上找到一个工作示例。黑色导航栏（“示例参考”）应该是粘性的。最初它static位于中间页面。当您向下滚动时，它会变成fixed和（在 iOS 9 中）消失，直到滚动停止。桌面浏览器和 iOS 8 中的行为是正确的。
I was kind of hoping for the typical CSS workarounds: forcing a 3D transform, disabling backface visibility and the like, obscure proprietary properties, ... But nothing seems to work.
我有点希望有典型的 CSS 解决方法：强制 3D 变换、禁用背面可见性等，模糊专有属性，......但似乎没有任何效果。
Are we about to forget "stickable" elements altogether now that it was working?
既然它正在工作，我们是否要完全忘记“可粘贴”元素？
回答by Nathan G
I had this same issue and was able to hack around it using the old "force a 3D transform" trick. Just set the element you are going to switch the position of to have a transform property of translate3d(0px,0px,0px). Make sure this is done before the position property is changed.
我遇到了同样的问题，并且能够使用旧的“强制 3D 变换”技巧来解决它。只需将要切换位置的元素设置为具有translate3d(0px,0px,0px). 确保在更改位置属性之前完成此操作。
回答by Seth Warburton
The only solution that I found to work correctly was to disable z-index translations on direct childrenof the fixed item, e.g.:
我发现正确工作的唯一解决方案是禁用固定项的直接子项上的 z-index 转换，例如：
.is-sticky > * {
-webkit-transform: translateZ(0);
}
回答by Arnaud van Zandwijk
I fixed this problem with an extra fixed element. After some testing I found out that it's the first element that becomes fixed has this problem. The 2nd, 3rd, etc works fine on iOS devices.
我用一个额外的固定元素解决了这个问题。经过一些测试，我发现它是第一个固定的元素有这个问题。第二、第三等在 iOS 设备上运行良好。
So, put right after your body openingtag a div.fixed-fix:
所以，在你的身体 opentag 之后放一个 div.fixed-fix：
.fixed-fix {
position:fixed;
top:-1px;
height:1px;
width:100%;
background:white;
}
now it works! The fixed-fix div MUSThave a backgroundcolor, because otherwise it wont work...
现在它起作用了！固定修复的 div必须有一个背景色，否则它将无法工作......
回答by user3724945
jQuery Sticky Kitand other similar plugins, even being well coded, are presenting this kind of behavior on iOS 9, and it is not the first time that something like this happens. The main point here is that Firefox Safari and Safari Mobile support the experimental position: sticky;, so did Google (Chromium) but, due to integration problems, has had to temporarily disable it, you can read more about it here. Having said that, my guess is that, very soon, position: sticky;will be part of the CSS specification and supported by all major browsers, thus I think the best approach to solve this issue is to use a polyfill instead of a plugin. Of course, a polyfill will not cover all the features and functionalities that these plugins offer. Nevertheless, in many situations, using a polyfill will do the work, as a robust and effective solution supported by all major browsers. In my opinion it is the way to go, for now. I personally use stickyfillalthough I am sure other polyfills in the wild will do the trick. All I can say is that, since I started using a polyfill instead of plugins, I have not had any browser compatibility issues.
jQuery Sticky Kit和其他类似的插件，即使编码得很好，也在 iOS 9 上呈现出这种行为，而且这样的事情不是第一次发生。这里的要点是 Firefox Safari 和Safari Mobile 支持实验性的position: sticky;，谷歌（Chromium）也是如此，但由于集成问题，不得不暂时禁用它，你可以在这里阅读更多关于它的信息。话虽如此，我的猜测是，很快，position: sticky;将成为 CSS 规范的一部分并得到所有主要浏览器的支持，因此我认为解决这个问题的最佳方法是使用 polyfill 而不是插件。当然，polyfill 不会涵盖这些插件提供的所有特性和功能。尽管如此，在许多情况下，使用 polyfill 可以完成这项工作，因为它是所有主要浏览器都支持的强大而有效的解决方案。在我看来，这是目前要走的路。我个人使用stickyfill，尽管我确信其他的polyfills也能做到这一点。我只能说，自从我开始使用 polyfill 而不是插件以来，我没有遇到任何浏览器兼容性问题。
回答by Yaron
Add this to your fixed element
Using a Mixing:@include transform(translate3d(0px,0px,0px))
Using CSS:translate3d(0px,0px,0px)
将此添加到您的固定元素
使用混合：@include transform(translate3d(0px,0px,0px))
使用 CSS：translate3d(0px,0px,0px)
