Javascript Safari中绝对定位浮动标题抖动

我这里有一个简单的单浮动头JSFIDLE：

基本上，它使用

translate3d

启动GPU，硬件加速浮动标头，以便可以更平滑地绘制。在最新的Safari中，头部会抖动，但在最新的Chrome、FF和Opera中，头部会画得非常好。受此影响的实际代码（引发此问题的代码）是我编写的代码，不能公开共享，但其工作方式与

fixed

定位类似，不幸的是，定位不是有效的解决方案

我试过：

将

backface可见性

CSS属性设置为

none

将

perspective

CSS属性设置为

1000

在动画逻辑期间播放

requestAnimationFrame

正在限制滚动事件回调

将

translateZ

转换设置为高于

0px

的值

但这一切都不起作用（或者至少——假设GPU已经启动，但这种不安仍然存在，这似乎是合理的）。我注意到有两个问题是相同的，我正在提出，但没有人回答：

这是已知的bug吗？有没有我不想填补的性能漏洞

编辑

我一直收到很多问题，为什么

位置：fixed

不是一个有效的选项。直接回答安东尼对问题本身的评论：

我不是在模仿/改造

位置：已修复
。如果你看一下投票率最高的答案（截至此评论），你会发现这似乎是一个狩猎问题。原因
position:fixed
在这种情况下是不可取的，因为所讨论的代码必须能够支持多个位于彼此下方的浮动头，并且具有一个“container”范围，其中可能存在无限嵌套的容器。使用固定位置不仅使这些浮动标题位于水平滚动的容器中时的代码更加复杂，而且使组件总体上更加脆弱（当小部件需要位于页面上其他位置的另一个容器中时，计算偏移量）。因此，在语义上，
绝对定位比
固定定位更适合我的需要

第二次编辑

考虑到Antony一直在告诉我什么（我可能正在重新发明轮子），在从用户3716477那里听到
-wekbit sticky
之后，我想更新这个问题，以展示我正在尝试做什么。您可以在此处查看除Safari之外的每个浏览器中我的代码的行为：


我学到了：

您不能依赖于
滚动
或任何类似滚动的事件（例如
鼠标滚轮
），因为它们本质上是异步的。我向苹果提交了一个bug，详细说明发生了什么，他们因此关闭了bug
到目前为止，还没有真正的方法来实现我想要的——让多个浮动头相互堆叠和替换。我想我得等类似的东西出来
从这里开始，我应该在SO问题中包含所有相关信息：-P
谢谢你和我一起玩！以下是我从苹果收到的确切回复：

苹果开发者关系09-Jun-2014 01:16下午

工程部已确定没有解决此问题的计划
基于以下几点：

代码使用的是异步滚动事件

我们现在关闭此错误报告

如果您对该问题的解决有疑问，请
用这些信息更新您的bug报告

请务必定期查看苹果新发布的版本，以获取任何更新
这可能会影响这个问题

如果您使用的是类似于jiddle代码的东西，则必须检查浏览器是否为safari，然后使用不同的方式，如：

$(function () {
    var $header = $('h1'),
        $container = $('.container'),
        $scrollContainer = $('.scroll-container'),
        scrollContainerOffset = $scrollContainer.offset().top;
    $scrollContainer.on('scroll', function () {
        var top = Math.max(0, $container.offset().top * -1 + scrollContainerOffset);
        $header.css('top', top + 'px');

    });
});

即使这不是您希望解决问题的方式，它也可能是一种有助于解决问题的变通方法……
进行一点重组怎么样，如下所示：

html:

这似乎是Safari滚动的一个bug。如果手动拖动滚动条（不要使用触摸板手势滚动），则不会出现抖动

Chrome（和其他浏览器）处理滚动的方式不同，这就是为什么这个bug只出现在Safari上。您可能需要向Apple提交一份bug报告。
由于使用触控板滚动和
滚动
事件触发之间存在一定的间隔，因此您可以将处理程序附加到一个附加组件上，以使事情变得更顺利

$scrollContainer.on('scroll mousewheel', function () {
    // reinvent the wheel here
});

从中可以看出，当您使用触控板滚动时，抖动发生的可能性要小得多。在演示中，我调用了加载时的处理程序，以便在您首次滚动Safari时消除闪存。可能仍然会有一些偶尔的抖动，但如果您想将其最小化，可以采用资源密集型的方式

这可能会暂时解决问题，但正如我之前所说的，这种模拟方法并不理想，您很可能会遇到更多麻烦。
滚动事件在各种浏览器中异步发送；你不应该依靠他们来做这样的事情

最好的解决方案是使用position:-webkit-sticky；排名：0
 您可以尝试禁用所有和任何javascript滚动处理，只需删除即可

位置：相对.container
中选择code>

之后，只需添加
h1{top:0；}
，它就会很高兴地粘贴到
.scroll容器中

摘自CSS绝对定位：

将其定位在相对于其最近定位的祖先的指定位置

解释一下-您的绝对H1将在树中查找第一个祖先元素，该元素定义了“位置”属性和inh
.container {
    height: 300px;
    position: relative;
    overflow-y:scroll;
}
.content {
    height:1000px;
}
h1 {
    position: relative;
    top:0px;
    left:0px;
    margin: 0;
    width: 100%;
    background: black;
    color: white;
}

$scrollContainer.on('scroll mousewheel', function () {
    // reinvent the wheel here
});