NEW230395
Elements with position: sticky have spaces above it 
https://bugs.webkit.org/show_bug.cgi?id=230395
Summary Elements with position: sticky have spaces above it
kovalev.mine
Reported 2021-09-17 02:01:08 PDT
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/
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-09-24 02:02:20 PDT
<rdar://problem/83486118>
Martin Robinson
Comment 2 2021-09-30 07:27:59 PDT
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.
kovalev.mine
Comment 3 2021-09-30 21:27:07 PDT
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/ Video: https://radikal.ru/video/3Oiyf4Zpdbj
Martin Robinson
Comment 4 2021-10-04 00:54:34 PDT
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: https://bugs.chromium.org/p/chromium/issues/list
Note You need to log in before you can comment on or make changes to this bug.