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

我在这里有一个简单的JSFiddle单个浮动头:

http://jsfiddle.net/zT9KQ/

基本上,这用于translate3d启动GPU和硬件加速浮动标题,以便可以更顺利地绘制它.标题在最新的Safari中抖动,但在最新的Chrome,FF和Opera中被完美地绘制.受此影响的实际代码(引发此问题的代码)是我编写的代码,不能公开共享,但工作方式类似fixed,遗憾的是,定位不是有效的解决方案.

我试过了:

将backface-visibilityCSS属性设置为none.

将perspectiveCSS属性设置为1000.

requestAnimationFrame在动画逻辑期间玩.

限制滚动事件回调.

将translateZ变换设置为高于0px.

但这一切都没有奏效(或者至少 - 假设GPU已经开始但抖动持续存在似乎是合理的).我注意到两个问题已经打开,这个问题与我正在提出的问题相同,但是没有人回答过它们:

Safari中Sticky Header中的抖动

在javascript中实现固定位置会在滚动时导致Safari中的抖动

这是一个已知的错误？是否存在性能漏洞我还没有密封？

编辑

我一直在收到很多关于为什么position: fixed不是有效选项的问题.直接回复安东尼对问题本身的评论:

我不是在模仿/重塑position: fixed.如果你看一下最高投票的答案(截至本评论),你会发现这似乎是一个Safari问题.position: fixed在这种情况下,原因是不可取的,因为所讨论的代码必须能够支持多个位于彼此下方的浮动标头,并且具有可以存在无限嵌套容器的"容器"范围.使用固定定位不仅会使代码更复杂,如果这些浮动标头位于水平滚动的容器中,而且整体上组件也更脆弱(当窗口小部件需要位于页面上其他位置的另一个容器内时计算偏移量) .因此,从语义上讲,absolute定位比我的需求更合适fixed.

第二次编辑

在考虑了Antony告诉我的事情(我可能正在重新发明轮子),并在听到用户-wekbit-sticky3716477之后,我想更新问题以显示我正在尝试做什么.您可以在此处查看我的代码在Safari之外的每个浏览器中的行为:

http://cl.ly/3y1i3C473G2G

我学过:

您不能依赖于scroll或实际上任何类似滚动的事件(例如mousewheel),因为它们本质上是异步的.我向Apple提交了一个错误,详细说明了正在发生的事情,因此他们关闭了这个错误.

现在没有真正的方法可以做我想要的 - 拥有多个堆叠和互相替换的浮动头.我想我必须等待出类似的东西-webkit-sticky.

我应该从现在开始在SO问题中包含所有相关信息.:-P

谢谢你们!以下是我从Apple收到的确切回复:

Apple Developer Relations09-Jun-2014 01:16 PM

Engineering已确定没有计划根据以下内容解决此问题:

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

我们现在正在关闭此错误报告.

如果您对此问题的解决方案有疑问,请使用该信息更新您的错误报告.

对于可能影响此问题的任何更新,请务必定期检查新的Apple版本.

Antony.. 10

由于在使用触控板滚动和触发事件之间存在明显的延迟scroll,因此您可以将处理程序附加到其他mousewheel事件以使事情顺利进行.

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

您可以在此演示中看到,使用触控板滚动时抖动的可能性要小得多.在演示中,我在加载时调用了处理程序,以便在首次在Safari上滚动时消除闪存.可能仍然会有一些偶然的抖动,但如果你想最小化它,你可以采用资源密集的方式使用setInterval和requestAnimationFrame.

这可能暂时解决了这个问题,但正如我之前所说的那样,这种仿真方法并不理想,你很可能在未来遇到更多麻烦.