When scrolling the page on mobile and the toolbar gets hidden or made
visible again as a result of scrolling the browser reports the size of
the page having changed when the scrolling ends, which in turn causes
perspective shifts when the finger is lifted from the screen.
Try to work around this by anticipating this resize and calculating the
perspective as if the screen hadn't changed size.
While window.visibleViewport and window.screen in theory could have been
used to determine exactly where and when the browser toolbar is present,
it was found through testing that neither Chrome nor Firefox on Android
reports useful values through these APIs, and instead pretended that the
inner viewport was the whole screen.
If the origin is set to the center of the screen for a small 3d element
that's near the top or bottom, then it looks out of place and can't be
scrolled to fit nicely in view. Adjust the origin to stay inside the
bounds of the viewport when scrolled to the edge of the screen in this
case.
Implement a Viewport component and associated update script that allows
rendering 3d content inside it. This is based on the implementation
used at Furnavia for their 2025 website.
