Repository navigation
fix(mobile): the status bar stays clear on iOS 27, and views run to the bottom edge - #85
Merged
Merged
Conversation
…he bottom edge ZenNotes/zennotes#1035: on iOS 27.2 in dark mode a whitish band covered the status bar until the keyboard opened, and a blank strip sat under every view. The band is the system's top scroll edge effect on the web view. Apps built with the iOS 27 SDK get the new design whatever UIDesignRequiresCompatibility says, so the WKWebView's scroll view carries the effect, and its blur reaches past the transparent page into the window behind it. That window's color is the keyboard backdrop's, set at boot and on keyboardWillShow only. index.html's pre-boot theme takes the stored themeId as is, and Auto keeps the id of the variant picked in light, so a dark-mode launch painted the window white before core resolved the theme to dark; nothing repainted it until a keyboard opened, which is why the band went away then. On an iOS 27.2 simulator with Auto and the Apple theme the band's pixels match the reporter's screenshot. ZNViewController hides the web view's four edge effects: the page draws its own chrome and never scrolls the document, so they have nothing to mark, and this alone clears the band whatever the window's color. The backdrop also follows the theme now: watchThemeBackdrop() re-reads --z-bg when core changes the theme attributes on <html> or its managed styles in <head>, once a frame, and sends a color only when it changed, so the window around the rounded keyboard matches too. The strip was the app shell's own bottom padding, 0.75rem plus the home indicator. The shell no longer pads the bottom: views run under the indicator to the screen edge, and each view's main scroller (a flex-1 overflow element) ends with that clearance as a spacer, so its last line still scrolls clear. The editor already ends with core's padding. The Kanban board pads itself so its columns stop where they did; side panels and the note-list column pad themselves and add no spacer; with the keyboard up the clearance is 0, as the padding was; and Cloud's attention row, now the last thing in the shell, carries the clearance under its 44px so its action and the circle stay put. The Android shell keeps its rules: the band needs UIKit's edge effects, and its always-on Cloud status row owns the bottom inset there. Verified on the simulator through the page, touch and lldb; the notes are in docs/status-bar-overlay-validation-2026-11-01.md.
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
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.
Fixes ZenNotes/zennotes#1035. On iOS 27.2 in dark mode, a whitish band covered the status bar until the keyboard opened, and a blank strip sat under every view.
The band. It is iOS 27's top scroll edge effect on the web view. Apps built with the iOS 27 SDK get the new design whatever
UIDesignRequiresCompatibilitysays, and the effect's blur shows the window behind the transparent page. That window was painted from the stored theme at boot, and with the theme on Auto the stored id is the variant picked in light. So a dark-mode launch painted the window white, and nothing repainted it until a keyboard opened.The fix:
ZNViewControllerhides the web view's four edge effects. The page draws its own chrome and never scrolls the document, so they have nothing to mark. This alone clears the band, whatever the window's color.watchThemeBackdrop()re-reads--z-bgwhen core changes the theme, so the area around the rounded keyboard matches too.The Android shell keeps its rules: the band needs UIKit's edge effects, and its Cloud status row owns the bottom inset there.
Validation:
docs/status-bar-overlay-validation-2026-11-01.md.