Bug 234500 - The element with the position: sticky in the scroll container shakes and jumps and forms gaps
Summary: The element with the position: sticky in the scroll container shakes and jump...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Scrolling (show other bugs)
Version: Safari 15
Hardware: iPhone / iPad iOS 15
: P2 Major
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-12-19 20:36 PST by p_stas1997
Modified: 2022-10-16 03:57 PDT (History)
3 users (show)

See Also:

Attachments
TestCase (2.36 MB, video/mp4)
2021-12-19 20:36 PST, p_stas1997 		no flags Details
Gap (18.15 KB, image/png)
2021-12-19 20:37 PST, p_stas1997 		no flags Details
TestCase (215.96 KB, video/mp4)
2021-12-19 20:41 PST, p_stas1997 		no flags Details
Show Obsolete (1) View All 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 p_stas1997 2021-12-19 20:36:38 PST 
Created attachment 447573 [details]
TestCase

The element with the position: sticky in the scroll container shakes and jumps and forms gaps

Paste the code on your server and see. Unfortunately codepen shows a site with scale, so you can't repeat this case there.

I use box-shadow: 0 -1px 0 0 white to layer sticky elements on top of each other. But that doesn't work in this case.
Comment 1 p_stas1997 2021-12-19 20:37:10 PST 
Created attachment 447574 [details]
Gap
Comment 2 p_stas1997 2021-12-19 20:41:38 PST 
Created attachment 447576 [details]
TestCase

Add video
Comment 3 Radar WebKit Bug Importer 2021-12-20 11:44:29 PST 
<rdar://problem/86733870>
Comment 4 Simon Fraser (smfr) 2022-01-24 17:06:34 PST 
Can you link to the HTML test case please
Comment 5 p_stas1997 2022-02-09 20:10:03 PST 
(In reply to Simon Fraser (smfr) from comment #4)
> Можете ли вы дать ссылку на тестовый пример HTML, пожалуйста

https://codesandbox.io/s/relaxed-star-ywx9w?file=/index.html
Comment 6 Johannes Odland 2022-10-16 03:57:03 PDT 
I've encountered "shaking" sticky elements more since iOS 16. Putting `transform: translateZ(0);` on a parent seems to solve the problem for me, but it should not be necessary.