fix(pwa): keep the installed app's content below iOS 26's edge blur - #411
Merged
Merged
Conversation
The opaque strip of #398, as tall as the status bar, did not stop the Liquid Glass edge blur on the reporter's iPhone 14 (retested 1 October 2026). The fix confirmed on devices elsewhere keeps content out of the blur: --inset-top (theme.css) is the safe-area inset, plus 2.5rem in the installed app on iOS in portrait, and every top edge uses it (app layout, sidebar, landing, privacy/changelog/story navs, login, PWA install and support modals, AI tutor drawer). The strip fills that band at z-25, under the sidebar overlay. Modal overlays scroll and center their card with my-auto, so a card taller than the screen is never cut at the top. Nothing changes in a browser tab or on desktop. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Sorry @thierryvm, you've used your own review budget of 250,000 diff characters for the last 7 days.
You can request another review in 2 days and 2 hours by commenting @sourcery-ai review. Upgrade to get a review now.
Guide du reviewerDéplace le contenu de la PWA iOS installée en mode portrait sous le flou des bords d’iOS 26 grâce à une variable partagée Diagramme de séquence du rendu d’une PWA iOS installéesequenceDiagram
participant CSS as theme.css
participant App as PWA iOS installée
participant Content as Contenu de l’application
participant Blur as Flou des bords d’iOS 26
participant Backdrop as StatusBarBackdrop
CSS->>App: Résoudre --inset-top
App->>Content: Appliquer l’encart supérieur à la mise en page et aux composants du bord supérieur
App->>Backdrop: Afficher une bande fixe de hauteur --inset-top
Blur-->>App: Dessiner le flou système sur le bord supérieur
Content-->>Blur: Commence sous la bande de flou
Backdrop-->>Blur: Afficher l’arrière-plan uni de l’application sous le flou
Diagramme de flux des modales hautes défilablesflowchart TD
Open["Ouvrir la modale"] --> Inset["Appliquer le padding --inset-top"]
Inset --> Scroll["Superposition défilable"]
Scroll --> Center["La carte utilise my-auto"]
Center --> Short["La carte courte reste centrée"]
Center --> Tall["La carte haute peut défiler depuis son sommet"]
Modifications au niveau des fichiers
Conseils et commandesInteragir avec Sourcery
Personnaliser votre expérienceAccédez à votre tableau de bord pour :
Obtenir de l’aide
Original review guide in EnglishReviewer's GuideMoves installed iOS portrait PWA content below iOS 26’s edge blur through a shared Sequence diagram for installed iOS PWA renderingsequenceDiagram
participant CSS as theme.css
participant App as Installed iOS PWA
participant Content as App content
participant Blur as iOS 26 edge blur
participant Backdrop as StatusBarBackdrop
CSS->>App: Resolve --inset-top
App->>Content: Apply top inset to layout and top-edge components
App->>Backdrop: Render fixed band with height --inset-top
Blur-->>App: Draw system blur over top edge
Content-->>Blur: Starts below blur band
Backdrop-->>Blur: Shows plain app background beneath blur
Flow diagram for scrollable tall modalsflowchart TD
Open["Open modal"] --> Inset["Apply --inset-top padding"]
Inset --> Scroll["Scrollable overlay"]
Scroll --> Center["Card uses my-auto"]
Center --> Short["Short card remains centered"]
Center --> Tall["Tall card can scroll from its top"]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
This branch was successfully deployed
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.
Summary
The opaque strip from #398 is as tall as the status bar. It did not stop iOS 26's Liquid Glass edge blur on the reporter's iPhone 14: the blur was still there on the installed app when it was retested on 1 October 2026. The blur is system chrome drawn over the web view, and no CSS or meta tag turns it off. Most fixes published elsewhere say they were not verified on a device. The one that was (xdoubleu/tools.xdoubleu.com#1988) keeps content below the blur instead of fighting it.
--inset-top(theme.css) equalsenv(safe-area-inset-top, 0px). In the installed app on iOS (@supports (-webkit-touch-callout: none)+display-mode: standalone, portrait), it adds2.5rem.Every top edge now uses it:
/privacy,/changelogand/storynavsA test forbids any component from using a bare
safe-area-inset-topagain.The strip fills that band, so content scrolling under the blur shows as a plain colour. It moves to
z-[25], under the sidebar's dimmed overlay (z-30).Modal overlays scroll and centre their card with
my-auto, so a card taller than the screen (keyboard open, age gate) starts at its top instead of being cut off.No change in a browser tab or on desktop: the variable resolves to the old values there, and the strip keeps a height of 0.
Gates
mobile-responsive-auditor: PASS_WITH_NOTES. Two modals without the inset and a modal that could not scroll were fixed here.ui-auditor: no CRITICAL. The stale comments it flagged were updated.feature-dev:code-reviewer: one IMPORTANT. The public pages outsideLayoutwould have had their nav hidden by the taller strip. Fixed.Test plan
🤖 Generated with Claude Code
Résumé par Sourcery
Maintenir le contenu des apps iOS installées sous le flou des bords d’iOS 26 tout en préservant les mises en page existantes en dehors du mode portrait autonome.
Correctifs :
Améliorations :
Documentation :
Tests :
Original summary in English
Summary by Sourcery
Keep installed iOS app content below the iOS 26 edge blur while preserving existing layouts outside portrait standalone mode.
Bug Fixes:
Enhancements:
Documentation:
Tests: