Bug 230395

Summary:	Elements with position: sticky have spaces above it
Product:	WebKit	Reporter:	kovalev.mine
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	mrobinson, simon.fraser, webkit-bug-importer
Priority:	P2	Keywords:	InRadar
Version:	Safari 14
Hardware:	iPhone / iPad
OS:	Unspecified

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