iOS 9 Safari：将元素更改为固定位置，滚动将不会绘制，直到滚动停止 [英] iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

问题描述

我一直在开发一个网站，并利用了相当不错的 jQuery Sticky Kit 插件。它通过将位置属性切换到固定并在适当时返回操作。

I've been developing a site and taking advantage from the rather good jQuery Sticky Kit plugin. It operates by switching the position property to fixed and back when appropriate. Runs very smoothly in desktop and acceptably so in mobile.

或至少它用于。 iOS 9具有新的行为：如果元素的位置从 static / 在滚动动画正在进行时，相对 / 绝对到到固定滚动已经停止。奇怪的是，相反的变化（从固定到任何其他）执行没有问题。

Or at least it used to. iOS 9 comes with a new behavior: if the position of an element changes from static/relative/absolute to fixed while the scroll animation is ongoing the element becomes invisible until after the scroll has come to a stop. Oddly enough the opposite change (from fixed to whatever else) is performed without issues.

位于插件主页上。黑色导航栏（示例参考）应该是粘性的。最初它是 static 位于中间页。当您向下滚动时，固定和（在iOS 9中）消失，直到滚动停止。桌面浏览器和iOS 8的行为是正确的。

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 fixed and (in iOS 9) disappears until scroll stops. Behavior in desktop browsers and iOS 8 is correct.

我希望能够使用典型的CSS解决方法：强制执行3D变换，禁用背景可见性等，属性，但是没有什么似乎工作。

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.

任何想法？

干杯，

Pablo 。

推荐答案

我有同样的问题，并能够使用旧的强制一个3D变换技巧。只需设置你要切换位置的元素，使其具有 translate3d（0px，0px，0px）的transform属性。请务必在更改position属性之前完成此操作。

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.

这篇关于iOS 9 Safari：将元素更改为固定位置，滚动将不会绘制，直到滚动停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！