Elements with position: sticky jump while scrolling and create space above itself.
We have a crutch for it, we set margin-top: -1px, padding-top: 1px, top: (needed top - 1px). It works, but in some cases like that https://bugs.webkit.org/show_bug.cgi?id=230390, we can't fix it.
Also it makes some problems with borders
Use link to see https://jsfiddle.net/taspqxLr/14/
I am not seeing this bug in the simulator, but it's possible that it still is an issue on devices. Are you able to capture a video to show the problem that you are seeing? It's a bit difficult to understand what jumping and creating space means here.
You can see the problem even in simulator, the reason you are not seeing bug is our crutch, where we add padding-top: 1px; margin-top: -1px; and top: (top we need - 1px); You can try this link https://jsfiddle.net/tnkfg2d8/2/
Thanks for sending the video. Looking at the interface, it looks like you are seeing this issue in the Chrome web browser running the equivalent of "responsive design mode" in Safari. Can you also reproduce it in Safari 15? I am able to see the problem of the flickering line in Chrome, but I don't see it in Safari. It's possible that you need to report this bug in the Chromium bug tracker since Safari and Chrome have completely different codebases now: