Bug 230395 - Elements with position: sticky have spaces above it
Summary: Elements with position: sticky have spaces above it
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 14
Hardware: iPhone / iPad Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-09-17 02:01 PDT by kovalev.mine
Modified: 2021-10-04 00:54 PDT (History)
3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description kovalev.mine 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/
Comment 1 Radar WebKit Bug Importer 2021-09-24 02:02:20 PDT 
<rdar://problem/83486118>
Comment 2 Martin Robinson 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.
Comment 3 kovalev.mine 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
Comment 4 Martin Robinson 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