Bug 261692

Summary:

DOM mutation and changing scrollTop updates the UI in 2 passes causing glitches

Product:

WebKit

Reporter:

Martin <martinbooth>

Component:

Scrolling

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

bfulgham, nmouchtaris, simon.fraser, webkit-bug-importer, zalan

Priority:

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.