Bug 261692

Summary: DOM mutation and changing scrollTop updates the UI in 2 passes causing glitches
Product: WebKit Reporter: Martin <martinbooth>
Component: ScrollingAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: bfulgham, nmouchtaris, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
Attachments:
Description Flags
Screen recording of the issue none

Martin
Reported 2023-09-18 12:23:35 PDT
Created attachment 467743 [details] Screen recording of the issue A pretty common pattern is to load more content as a user scrolls up or down, and to do that when a user scrolls up, it's necessary to apply a "correction" to the scroll position when inserting new content so that it appears to the user that it is in the same place In other browsers, it's possible to insert new dom content and change the scrollTop so that the user does not see these 2 actions happening separately, but with safari/webkit the new scroll position is rendered first, followed by the new content (despite the javascript actually doing these things the other way round) The following is a repro of the issue.. as you scroll up, more content is loaded, but the screen jumps around <html> <style> body { padding: 0; margin: 0 } #scrollarea { height: 100%; border: 1px solid black; width: 100%; position: absolute; overflow: scroll; overflow-anchor: none; } .row { padding: 5px; margin: 5px; } </style> <body> <div id="scrollarea"></div> <script> const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam elit mi, mattis dictum placerat vel, lacinia nec metus. Etiam eu nunc ut sapien tempus luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque eget libero ligula, nec blandit metus.' const scrollarea = document.getElementById('scrollarea'); const colours = ["red", "blue", "yellow", "purple", "gray", "orange", "green"]; ensureContainerFull(scrollarea); function isSufficientContentLoadedAbove({ clientHeight, scrollTop, }) { return scrollTop > clientHeight * 2; } function addMoreAbove() { const currentHeight = scrollarea.scrollHeight; const div = document.createElement('div'); div.setAttribute('class', 'row'); div.innerText = text.split(' ').slice(0, Math.random() * text.split(' ').length).join(' ') div.style.backgroundColor = colours[Math.floor(Math.random() * 7)] scrollarea.prepend(div); const newHeight = scrollarea.scrollHeight; scrollarea.scrollTop += (newHeight - currentHeight); ensureContainerFull(scrollarea); } function ensureContainerFull(scrollarea) { const { clientHeight, scrollTop } = scrollarea; if (!isSufficientContentLoadedAbove({ clientHeight, scrollTop })) { addMoreAbove() } } scrollarea.onscroll = () => ensureContainerFull(scrollarea) </script> </body> </html>
Attachments
Screen recording of the issue (31.33 MB, video/quicktime)
2023-09-18 12:23 PDT, Martin 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2023-09-19 10:33:15 PDT
This is because WebKit doesn't yet implement scroll anchoring.
Martin
Comment 2 2023-09-19 11:30:41 PDT
Yeah, I'm aware webkit doesn't implement scroll anchoring.. but it should be able to implement it in javascript code right? The only barrier to doing that in webkit is that prepending a new element to a container, and adjusting the scrollTop of that container by the height of the element does not happen in the same paint.. that is, you can observe these 2 changes separately leading to a really glitchy experience. In all other browsers (with scroll anchoring disabled for that container) these 2 changes are observed simultaneously and there is no glitching.
Radar WebKit Bug Importer
Comment 3 2023-09-25 12:24:20 PDT
<rdar://problem/116009303>
Note You need to log in before you can comment on or make changes to this bug.