Absolute Positioned Floating Header Jitters in Safari

Question

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: - Setting the `backface-visibility` CSS property to `none`. - Setting the `perspective` CSS property to `1000`. - Playing with `requestAnimationFrame` during the animation logic. - Throttling the scroll event callback. - 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…

Accepted Answer

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.

Absolute Positioned Floating Header Jitters in Safari

Solution

Problem