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.
Prefer breaking words instead of overflowing the containers they are
inside of. This prevents the site from scrolling to the right on
extraordinarily narrow screens.
Establish a playground for trying out complex components and styles
without having to use them in a content page. This starts out as a
testing ground for the 3d Viewport.
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.
Use a more traditional source code layout with the code located in the
src/ dir and static web content in the web/ dir, while the other places
are for data not related to code or content.
