在Safari绝对定位浮动头抖动 [英] Absolute Positioned Floating Header Jitters in Safari

问题描述

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

http://jsfiddle.net/zT9KQ/

基本上，这种使用 translate3d 来在GPU踢和硬件加速浮动头，以便它可以更顺利地绘制。在最新的Safari浏览器的标题不安，但被绘制在最新的Chrome，FF和Opera完美的罚款。正在受此（在code，它刺激了这个问题）的实际code是code我已经写了不能公开共享，但以同样的方式工作，其中固定定位是，不幸的是，不是一个有效的解决方案。

我曾尝试：

1. 在背面能见度 CSS属性设置为无。


2. 在透视 CSS属性设置为 1000 。


3. 动画逻辑期间与 requestAnimationFrame 播放。


4. 节流滚动事件回调。


5. 设置 translateZ 变换比更高的东西 0像素。

不过，这都不是工作（或至少是 - 它似乎是合理的假设GPU已经踢，但仍然存在抖动）。我注意到两个问题都已经打开的情况是相同的这一块我养的，但没有人回答他们：

• 在抖动头粘在Safari


• Implementing滚动
在当前在JavaScript固定位置引起的抖动在Safari

这是一个已知的bug？有没有我不查封性能孔？

修改

我已经收到了很多问题，为什么的位置是：固定不是一个有效的选项。直接回复安东尼的评论对这个问题本身：

我不模仿/重塑的位置是：固定。如果你看一下得票最多的答案（因为这样的注释），你会看到，这似乎是一个Safari浏览器的问题。究其原因的位置是：固定在这种情况下不可取的，因为有问题的code必须是能够支持坐在下面互相多个浮动头和具有容器范围，其中可能有无限嵌套容器。使用固定的定位不仅使code在这些浮动头生活在一个容器在水平方向滚动，但也使得组件更脆整体的情况更复杂的（计算偏移时插件需要别的地方上的另一个容器内坐这一页）。因此，语义，绝对定位符合我的需求比固定。

更好

第二修改

一旦想什么安东尼曾经告诉我（我可能会重新发明轮子），并从user3716477听到关于 -wekbit粘性之后，我想更新的问题，以显示我想要做的。你可以看到我的code比在这里的Safari等浏览器的每一个行为方式：

http://cl.ly/3y1i3C473G2G

我已经学会了：

1. 您可以不依赖于滚动还是真的任何滚动般的事件（如滚轮），因为它们是异步的性质。我提交了详细说明发生了什么事给苹果一个bug，他们关闭的bug这个原因。


2. 还有就是做我想做截至目前没有真正的方法 - 有这种堆叠多个浮动头和相互取代。我想我得等到类似的 -webkit-粘 出来。


3. 我应该包括的所有的有关在做题从这里开始了信息。 :-P

感谢您的参与家伙！下面是我从苹果公司收到的确切回应：

  

苹果开发者Relations09君2014年下午1点16分

  
  

工程已确定不存在要解决这个计划
  基于以下内容：

  
  

code使用滚动事件，这是异步的。

  
  

我们正在填补这一漏洞报告。

  
  

如果您有任何关于此问题的解决问题，请
  更新与该信息的错误报告。

  
  

请一定要定期检查新苹果发布的任何更新
  可能会影响这个问题。

解决方案

由于有一个明显的延迟与触控板滚动之间在滚动激发事件，可以将处理程序附加到其他 滚轮事件来平滑的事情了。

  $ scrollContainer.on（滚动鼠标滚轮'，函数（）{
    //此处推倒重来
}）;
 

您可以在这个演示的抖动是不太可能当您使用触控板滚动出现。在演示中，我援引负载的处理程序，以消除在Safari闪光灯当您第一次滚动。可能还有一些偶然的抖动，但如果你想以最小化，你可以使用的setInterval 的资源密集型方式/ code>和 requestAnimationFrame 。

这可能会解决问题，现在，但正如我以前说过，这种仿真的方法是不理想的，你很可能遇到更多的麻烦的道路。

I have a simple JSFiddle of a single floating header here:

http://jsfiddle.net/zT9KQ/

Basically, this uses translate3d to kick in the GPU and hardware accelerate the floating header so that it may be drawn more smoothly. The header jitters in the latest Safari but gets drawn perfectly fine in the latest Chrome, FF and Opera. The actual code that is being affected by this (the code that spurred this question) is code I've written that cannot be shared publicly but works in a similar manner where fixed positioning is, unfortunately, not a valid solution.

I have tried:

1. Setting the backface-visibility CSS property to none.
2. Setting the perspective CSS property to 1000.
3. Playing with requestAnimationFrame during the animation logic.
4. Throttling the scroll event callback.
5. Setting the translateZ transform to something higher than 0px.

But none of this has worked (or at least - it seems reasonable to assume the GPU has kicked in but the jittering persists). I noticed that two questions are already open that are identical this one I'm raising but no one has answered them:

• Jitter in Sticky Header in Safari
• Implementing fixed position in javascript causes jitter in Safari when scrolling

Is this a known bug? Is there a performance hole I'm not sealing up?

EDIT

I have been receiving a lot of questions as to why position: fixed is not a valid option. To directly reply to Antony's comment on the question itself:

I'm not emulating/reinventing position: fixed. If you look at the top-voted answer (as of this comment), you will see that this seems to be a Safari issue. The reason position: fixed is undesirable in this case is because the code in question must be able to support multiple floating headers that sit below each other and have a "container" range where there may be infinitely nested containers. Using fixed positioning not only makes the code more complicated in the case where these floating headers live in a container that horizontally scrolls but also makes the component more brittle overall (calculating offsets when the widget needs to sit within another container somewhere else on the page). So, semantically, absolute positioning fits my needs better than fixed.

SECOND EDIT

Upon thinking about what Antony had been telling me (that I may be reinventing the wheel), and after hearing about -wekbit-sticky from user3716477, I would like to update the question to show what I'm trying to do. You can see how my code behaves in every browser other than Safari here:

http://cl.ly/3y1i3C473G2G

I have learned:

1. You cannot rely on the scroll or really any scroll-like events (such as mousewheel) since they are asynchronous in nature. I submitted a bug to Apple detailing what was happening and they closed the bug for this reason.
2. There is no real way to do what I want as of now - to have multiple floating headers that stack and replace each other. I guess I'll have to wait for something like -webkit-sticky to come out.
3. I should include all relevant information in SO questions from here on out. :-P

Thanks for playing guys! Here's the exact response I received from Apple:

Apple Developer Relations09-Jun-2014 01:16 PM

Engineering has determined that there are no plans to address this based on the following:

Code is using scroll events, which are asynchronous.

We are now closing this bug report.

If you have questions regarding the resolution of this issue, please update your bug report with that information.

Please be sure to regularly check new Apple releases for any updates that might affect this issue.

解决方案

Since there is an apparent delay between scrolling with the trackpad and the scroll event firing, you can attach the handler to an additional mousewheel event to smoothen things up.

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

You can see in this demo here that jittering is far less likely to occur when you scroll with the trackpad. In the demo, I have invoked the handler on load to eliminate the flash when you first scroll on Safari. There may still be some occasional jitter, but if you want to minimize that, you can go the resource intensive way of using setInterval and requestAnimationFrame.

This might fix the problem for now, but as I have said before, this emulation approach is not ideal and you are very likely to run into more trouble down the road.

这篇关于在Safari绝对定位浮动头抖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！