Update position of fixed element on scroll is slightly behind in IE and Firefox only

Question

I've created a fiddle for this question: https://jsfiddle.net/alinnert/wcz7qm9u/

In this fiddle there are two elements:

• An ordinary <p> (position: static;)
• A fixed <div> (position: fixed;)

I'm using requestAnimationFrame() to update the position of the fixed element. And I try to position it at the exact same Y coordinate as the paragraph. This is just a simplified example to demonstrate the issue.

It looks totally fine in Chrome. But in IE, Edge and Firefox the position is slightly "behind" when I'm scrolling. After I'm finished scrolling the position is correct. But it seems the rendering after the calculation has been made happens too late.

Is there an explanation to how and why that happens? And is there something I can do about that in said browsers?

There are those parallax scrolling scripts around the web. They work the exact same way. Is it just that you don't notice that effect with parallax scrolling?

---

Edit for better understanding of the problem: I scrolled the example and took a screenshot at the same time.

This is what it looks like for a very short period of time. If I scroll in the other direction the fixed element is visible above instead of below the paragraph.

Answer 1

This is a feature introduced in FF 46.

Basically this can also happen in Chrome and other browsers (Although in Chrome it only happens a) sometimes and b) for just one frame out of 1000.)

The scroll event is not really synced with the real rendering of the scroll. The oldschool scroll event was indeed synced with the visual scroll. But especially for mobile it was hard to have a performant scroll rendering that is synced with JS including the scroll event.

The main solution was to decouple the scroll rendering from the main thread. As you know JS is executed in the main thread and therefore this results in the fact that JS (main thread) and visual scrolling (a special composition thread) are out of sync.

You might be able to workaround this by simply fixing everything and than animating the transform x property. Maybe also hooking into wheel event might help. (Using wheel partially destroys the performant async nature of the scroll rendering (this is why passive event listeners, where introduced).

You can read more:

https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Scroll-linked_effects

https://hacks.mozilla.org/2016/02/smoother-scrolling-in-firefox-46-with-apz/