Solved Divi sticky header flicker issue

Hi!
There is a bug in divi which is known by them but a fix is waiting for more then a year. So i thought maybe there are some smart people here that have a solution.

So: if you put a sticky header with the "stick to top" option then if you scroll down in Chrome. Sometimes scroll fast but also scroll slow, the sticky content wants to replace itself but then keeps stuck so you can see a flicker in the header. You can fix this by setting the position > relative > vertical offset > to -1px. Problem then is that there can become a white gap between the header and the content if you resize the browser window.

I have a loom video with the bug here: https://www.loom.com/share/b4b8d5a411614a6b91590d8e82558dd0?sid=a2bb5e32-fae5-45d9-90e5-867bf33cdf3c

Is there someone in here who knows this bug and has a good working solution for it? Since it is a niche for them and many people divi does not see this as an important bug, but for me this looks really unprofessional so i am looking for a fix already for ages.

Thanks for the help!

Jelle

 

If you set position > relative > vertical offset > to -1px and sticky state vertical offset to 0px it seems to be fixed

 

I also made a CSS with the help of chatGPT to fix this. You just need to give the section of your header a CSS ID "pa-header" or whatever name you choose:

Code:

Log In or Sign Up to view this code.

Explenation (chatGPT):

Technical explanation
What Divi does internally:
When you make a section sticky, Divi uses a JS script (stickyElements.js) that:
Compares the offset of the element with the viewport when scrolling.
Dynamically changes the CSS position from relative → fixed.
Simultaneously adjusts the top value to what you have set (usually 0px).

The problem:
at the exact moment Divi makes that transition, the calculation point of the layout (the containing block) changes. As a result, the browser has to reposition and redraw the element.
If the difference between the “non-sticky” and “sticky” positions is exactly 0px, there may be a single frame in which the browser thinks the element is not yet in place (0 → -0.3px rounding difference).
This causes micro-judder or flicker — especially on 60Hz screens or high DPI.

Why your solution works
By:
applying position: relative with top: -1px,
you give the browser one pixel of leeway before Divi's script switches to sticky.
When the sticky status then activates top: 0px,
there is effectively a small visual correction, allowing the browser to make that difference in one smooth compositing update, without reflow.

➡️ In other words:
you have shifted the layout delta from 0 → 0px (which causes the bug)
to -1 → 0px (which the GPU can resolve as a single transform frame).

Brilliant in its simplicity, really.