On Google Chrome when adding an element to the DOM above the user's viewport, the content in the viewport does not shift, while on Safari it does (equal to the height of the new element).
How is it possible to not have the content shift on Safari following an update outside of the viewport?
In the demo video below, an item is added to the top of the list (every 4 seconds). As the item is added (highlighted in blue) the content in the viewport (mimicked using the scrollable area) shifts downwards causing a layout shift.
- Source Code: https://github.com/kevinfarrugia/poll-layout-instability
- Demo: https://kevinfarrugia.github.io/poll-layout-instability/
from On Safari, the content in the viewport shifts when the DOM is updated outside of the visible viewport
No comments:
Post a Comment