fix: paint an opaque canvas so Firefox on Android has no white bars - #384
Open
lamiskin wants to merge 2 commits into
Open
fix: paint an opaque canvas so Firefox on Android has no white bars#384lamiskin wants to merge 2 commits into
lamiskin wants to merge 2 commits into
Conversation
Cherry-picked from the old fork main (ce68d7d) as its own independent branch off the current main — it was merged into the fork before main was reset to exactly match upstream/main, so it silently dropped out. The app had no opaque background colour on either html or body, so the entire dark appearance depended on a single animated gradient image. body's winning background rule is unlayered and uses the background shorthand, which resets background-color to transparent — leaving body with a gradient image and no colour, propagated to the canvas over the browser's default white. Chromium extends the propagated image across overscroll/safe-area regions; Firefox on Android does not, hence the white bars. Sets background-color on html (whose background always paints the whole canvas) and restores an opaque colour to body's shorthand as a fallback. Both use var(--color-bg) since main.jsx sets data-theme on documentElement and each [data-theme] block redefines it.
The vertical opaque-canvas fix targets legitimate top/bottom overscroll bounce, which the app wants. Horizontal scroll at the page root is not wanted anywhere, so if the document is ever a pixel wider than the viewport (e.g. an edge-bleed carousel row miscalculating its own negative margin), the page becomes horizontally pannable/bounceable at the root and the same white-canvas symptom reappears on the right edge. overflow-x: hidden on html/body removes that scroll surface entirely instead of relying on background colour to hide what it reveals.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What and why
The app had no opaque
background-coloronhtmlorbody— the dark appearance depended entirely on a gradient image.body's winning background rule uses the unlayeredbackgroundshorthand, which resetsbackground-colorto transparent, so the canvas behind that gradient was the browser's default white. Chromium extends the gradient across overscroll/safe-area regions; Firefox on Android doesn't, showing white bars.Sets
background-color: var(--color-bg)onhtml(whose background always paints the whole canvas, themed per[data-theme]) and restores an opaque fallback colour tobody's own shorthand.Also found on-device: a persistent white strip on the right edge, at rest rather than only during a bounce gesture — a different bug, since nothing at the page root should ever scroll horizontally. Painting over it would have hidden a real overflow bug rather than fixed it, so this adds
overflow-x: hiddentohtml, bodyto remove that scroll surface entirely.Before — white strip visible on the right edge:
After — fixed:
Validation
Card UI (when applicable)