在较新的 iOS 设备上具有粘性位置的“跳跃效果”

Question

header元素的内容在滚动时有“跳跃效果”。这仅发生在 iOS 移动设备上。

标题有

sticky

位置。如果我将其更改为

fixed

位置，它可以解决问题，但滚动弹跳效果效果不佳。不使用固定位置如何解决这个问题？

存在所描述问题的网站已上线，您可以通过在浏览器中检查该网站来查看和编辑CSS。

我尝试更改位置，设置标题中子元素的宽度，但没有解决问题。

Answer 1

编辑：

经过进一步调查，该问题似乎出现在较新的 iOS 设备上，例如 iPhone 13 或更新版本，并且不仅仅像最初假设的那样出现在模拟器中。

过去在 Safari 中（但有时在其他浏览器中）出现过渡/动画问题时对我帮助很大的一个“技巧”是强制浏览器使用”硬件加速”，以便浏览器也使用 GPU 功率，而不仅仅是 CPU 功率来渲染。关于这个主题的文章很多，因为它已经存在很长时间了，但它仍然相关，如果您有兴趣了解更多信息，可以阅读它：

Michael Uloth 的translateZ 技巧

transform: translateZ(0);

在较新的 iOS 设备上

滚动

时，这似乎可以

停止粘性标题中 SVG 的“跳跃”。

原答案：由于我在您的 GIF 上看到鼠标光标，我

假设

您使用

对其进行了测试。这个假设正确吗？

如果是这样，这似乎是模拟器中的问题/错误（这对于模拟器来说很常见，因为它们不是 100% 准确且与原始操作系统/设备相同）。我得出这个结论是因为在
real iOS 设备（iPhone 11 上的 iOS 版本 17）上测试粘性定位标题并not

似乎重现了不需要的“跳跃”效果，如以下记录中所示（低分辨率 GIF）：

根据我个人的经验，以下 3 种方法对于此类情况总是有帮助的。

Answer 2

使用

-webkit-overflow-scrolling: touch;

: 应用 CSS 属性 -webkit-overflow-scrolling: touch;到正在滚动的容器。此属性有助于改善 iOS 设备上的滚动行为，并可能有助于解决跳跃效果。

.scrollable-container {
    overflow-y: auto; /* or scroll */
    -webkit-overflow-scrolling: touch;
}

添加透明分隔符：在可滚动内容的顶部添加一个与粘性标题高度相同的透明分隔符元素。

<div style="height: <height of the sticky header>;"></div>

或调整 Z 索引：确保粘性标头的 z 索引设置适当，以确保它按预期保持在其他内容之上。

 .sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000; /* adjust as needed */ }

但考虑到所有因素，我经常倾向于使用 javascript 替代品，例如 Stickyfill.js