iOS 9 Safari：滚动时将元素更改为固定位置，直到滚动停止才会显示

Question

我一直在开发一个网站，并受益于非常好的jQuery Sticky Kit插件。它通过在适当的时候将position属性切换为fixed并恢复，来实现粘性效果。在桌面端运行非常流畅，在移动端也还可以接受。

或者至少曾经是这样的。iOS 9带来了一种新的行为：如果一个元素的position从static/relative/absolute变为fixed，而滚动动画仍在进行中，则该元素在滚动停止之前变得不可见。奇怪的是，相反的变化（从fixed到其他）没有问题。

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

我有点希望采用典型的CSS解决方法：强制3D转换，禁用背面可见性等，模糊的专有属性等。但是似乎没有任何方法可以解决这个问题。

我们是否即将放弃“可粘性”的元素，即使它之前运行正常？

- instanceofnull

---

如果你正在开发iOS应用，你应该使用更好的解决方案——CSS中的position: sticky，尽管需要加上前缀。你可以为其他所有内容保留jQuery插件，并在iOS支持它的地方（7+，如果我没记错的话）使用本机CSS解决方案。 - TylerH

嗯，我正在为所有平台开发，但这允许采用混合方法。谢谢！ - instanceofnull

经过几个小时的试错，我可以得出结论，iOS对粘性标题的支持非常好，但是当涉及到粘性列时，一切都变得混乱不堪。还有点儿不够成熟。 - instanceofnull

Answer 1

我曾经遇到过同样的问题，并成功使用“强制进行3D变换”的老技巧来解决。只需设置您要切换位置的元素，使其具有translate3d(0px,0px,0px)的变换属性即可。请确保在更改位置属性之前完成此操作。

- Nathan G

---

"translate3d()" 对我的布局产生了一些问题，但是 "translateZ(0)" 很好地解决了这个问题。" - nothingtosee

我在同一个CSS类上使用了translate3d()，诀窍是在改变位置或添加新类之前应该先使用它。谢谢！ - André Gil

这在iOS 10上对我似乎不起作用...好吧，它能工作，但是我可以通过拖动来破坏它，例如固定元素“粘”在一起，然后改变我的拖动方向 :-( - Simon_Weaver

很遗憾，这对我来说似乎不起作用，在Safari 9.0上什么都没有。隐藏/显示，添加元素，添加CSS动画，访问offsetHeight。我尝试了我能找到的每一个技巧，但是直到我从屏幕上移开滚动手指，那个标题栏才会在固定位置重新绘制 :( - Codemonkey

我真的花了好几天时间努力解决问题，我的粘性标题样式更改无法立即生效，直到滚动完全停止，使整个页面看起来笨重和奇怪。在默认元素样式中添加transform: translateZ(0);解决了这个问题，现在样式过渡在滚动期间顺畅进行。太棒了！谢谢大家！（在iPad mini上使用iOS 10.0.2的Chrome和Safari测试通过） - Katrin

Answer 2

我发现唯一有效的解决方案是禁用固定元素直接子元素的z-index属性，例如：

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

- Seth Warburton

Answer 3

我通过添加一个额外的固定元素来解决了这个问题。经过一些测试，我发现第一个变为固定元素的元素会出现这个问题。iOS设备上，第2个、第3个等等都能正常工作。

所以，在您的body开头标签之后加入一个div.fixed-fix：

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

现在它可以工作了！ 修复后的div 必须有一个背景颜色，否则它将无法正常工作...

- Arnaud van Zandwijk

---

这似乎在我的iOS10上无法使用。也许他们已经“修复”了它？我真的希望能够使用，因为我发现“翻译”选项非常容易出现故障。 - Simon_Weaver

Answer 4

jQuery Sticky Kit 和其他类似的插件，虽然编码良好，但在iOS 9上出现了这种行为，并且这不是第一次发生这样的事情。主要问题在于，Firefox Safari和Safari Mobile支持实验性的position: sticky;，Google（Chromium）也是如此，但由于集成问题，它不得不暂时禁用它，您可以在这里阅读更多信息。说到这里，我猜想，很快，position: sticky;将成为CSS规范的一部分，并受到所有主要浏览器的支持，因此我认为解决此问题的最佳方法是使用polyfill而不是插件。当然，polyfill无法涵盖这些插件提供的所有功能和功能。尽管如此，在许多情况下，使用polyfill就能达到目的，作为一种强大有效的解决方案，受到所有主要浏览器的支持。在我看来，现在应该采取这种方法。我个人使用stickyfill，虽然我相信其他的polyfills也能达到效果。我只能说，自从我开始使用polyfill而不是插件以来，我从未遇到过任何浏览器兼容性问题。

- user3724945

Answer 5

将以下内容添加到您的固定元素中：
使用混合方式： @include transform(translate3d(0px,0px,0px))
使用CSS： translate3d(0px,0px,0px)

- Yaron

---

“使用“SCSS”是错误的。您建议使用的是一个mixin，可能来自于compass...” - yckart

使用SCSS并没有错，它只是一种可以省去手动输入每个浏览器前缀的方法。 - Zanderi

除了这可能只是一个iOS的“问题”，因此您不需要担心任何前缀。 - Simon_Weaver