This page uses Kieth Clark’s Pure CSS parallax layout. It works fine without scrollbars, or with the default Mac scrollbars for trackpads, which do not change the width of the scrolling element.
On Mac, you can do this by going to System Preferences > General
and setting Show scroll bars to Always. This also happens under the
default settings whenever a USB mouse is connected.
A red strip of document body peeking past the parallax background. This is because the scrollbar changes the inner width of an element, but not the total size, in which the 3D space for parallax elements is rendered.
You can try some of my fixes using the menu in the top left. The first
pair modifies the perspective-origin and transform-origin
properties. The second adds padding and negative margins to offset the
scrollbar.
When I initially wrote this in 2018, Safari rendered 3D space differently than other modern browsers, making every solution imperfect. Fixes 1a and 2a were slightly misaligned on Safari, while fixes 1b and 2b only worked on Safari.
At least since Safari 14.1.2, this is no longer a problem. Fixes 1a and 2a are aligned across all modern browsers, and the extra padding of fixes 2a and 2b, which accounted for browser inconsistencies, is no longer needed.
Fix 1a is the best solution.
.parallax-page {
perspective-origin: left;
}
%parallax-bg {
transform-origin: left;
}