| Summary: | The element with the position: sticky in the scroll container shakes and jumps and forms gaps | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | p_stas1997 | ||||||||
| Component: | Scrolling | Assignee: | Nobody <webkit-unassigned> | ||||||||
| Status: | NEW --- | ||||||||||
| Severity: | Major | CC: | johannes.odland, simon.fraser, webkit-bug-importer | ||||||||
| Priority: | P2 | Keywords: | InRadar | ||||||||
| Version: | Safari 15 | ||||||||||
| Hardware: | iPhone / iPad | ||||||||||
| OS: | iOS 15 | ||||||||||
| Attachments: |
|
||||||||||
Created attachment 447574 [details]
Gap
Created attachment 447576 [details]
TestCase
Add video
Can you link to the HTML test case please (In reply to Simon Fraser (smfr) from comment #4) > Можете ли вы дать ссылку на тестовый пример HTML, пожалуйста https://codesandbox.io/s/relaxed-star-ywx9w?file=/index.html 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. |
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.