Use ordinary scrolling backgrounds on mobile
showcase/deploy Live at https://showcase.andrefiedler.de/2608_BuB/

This commit is contained in:
André Fiedler
2026-09-07 18:58:57 +02:00
parent 164476a5b3
commit 4c71cc873f
4 changed files with 18 additions and 12 deletions
+9 -11
View File
@@ -308,20 +308,18 @@ address {
--unit: 1px;
}
body::before {
position: absolute;
block-size: 100%;
background-image: url("./background-mobile.webp");
background-size: cover;
body {
isolation: auto;
background-image: url("./construction-tape.svg"), url("./background-mobile.webp");
background-position: center top;
background-size: 1200px 254px, cover;
background-repeat: no-repeat;
}
/* Mobile decoration is a normal background, with no layers in the touch path. */
body::before,
body::after {
position: absolute;
z-index: -1;
inset: 0 0 auto;
block-size: 254px;
background: url("./construction-tape.svg") center top / 1200px 254px no-repeat;
content: "";
content: none;
}
.page {
+2
View File
@@ -4,6 +4,8 @@ The supplied 1200 × 900 PDF and its IDML source define the desktop composition.
CSS lives in `assets/styles.css`; all colors are CSS custom properties. Its link in `index.html` carries a content-hash query parameter; update that value when the CSS changes to avoid stale browser caches. Layout scales with the design above 1024 px. At smaller sizes the type becomes larger and wraps; at 600 px the bank and PayPal details stack in their original reading order. The mobile background separates the supplied tape from the photograph so that it remains above the logo while the photo fills a tall page. `assets/app.mjs` only enhances the IBAN with clipboard support and an accessible selection fallback. Contact and payment links work without JavaScript.
At 1024 px and below, both decorative images are ordinary `body` backgrounds. The desktop pseudo-elements and isolated stacking context are disabled, leaving mobile touch scrolling to the document without separate decorative layers.
## Preview and deployment
Requires Node 20.11 or newer. There are no npm dependencies and no third-party page requests.
+6
View File
@@ -32,3 +32,9 @@ Desktop band follow-up on 2026-09-07:
- Inspected the initial and scrolled desktop screenshots against the previously deployed composition; layout and artwork placement are retained.
- A foreground mask keeps the opaque desktop tape above scrolling content. At 1200 px, a tape region previously covered by text stays pixel-identical before and after scrolling; the foreground does not intercept pointer events. Checks at 1025, 1024 and 390 px confirm the breakpoint and mobile scrolling behavior, with no horizontal overflow.
- The mask also includes the soft shadow. At 1200 px with 90 px of scrolling, 260 previously white logo pixels receive visible shading; differences are confined to the logo passing under the shadow. The initial desktop screenshot remains pixel-identical, confirming the background shadow is not doubled.
Mobile touch follow-up on 2026-09-07:
- The reported blocked scrolling was not reproduced with touch events in current desktop Chrome's mobile simulation or native swipes in Android 14 with Chrome 113. The user's physical phone was not available.
- Simplified mobile decoration to normal body backgrounds and removed its pseudo-elements and isolated stacking context as a compatibility measure. Native Android swipes reach the bottom of the updated page (scroll position 538.18 px, viewport 760 px, document 1298 px).
- Updated desktop (1200 px) and mobile (390 px) scrolled screenshots are pixel-identical to the previous rendering. Checks at 1025 and 1024 px retain the desktop/mobile breakpoint and show no horizontal overflow.
+1 -1
View File
@@ -35,7 +35,7 @@
<link rel="manifest" href="./site.webmanifest">
<link rel="preload" href="./assets/fonts/roboto-italic-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="./assets/fonts/roboto-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="./assets/styles.css?v=3ca779d74105">
<link rel="stylesheet" href="./assets/styles.css?v=92d977816ce0">
<script type="module" src="./assets/app.mjs"></script>
<script type="application/ld+json">
{