Skip to content

fix(ios): let a scroll view's background reach the safe-area inset - #77

Open
CodyPChristian wants to merge 1 commit into
NativePHP:mainfrom
CodyPChristian:fix/ios-scrollview-safe-area-background
Open

fix(ios): let a scroll view's background reach the safe-area inset#77
CodyPChristian wants to merge 1 commit into
NativePHP:mainfrom
CodyPChristian:fix/ios-scrollview-safe-area-background

Conversation

@CodyPChristian

Copy link
Copy Markdown
Contributor

The bug

A ScrollView is laid out inside the safe area, so a background declared on it stops short of the home indicator and the window shows through — a band of systemBackground behind the tab bar on an otherwise fully themed screen.

List doesn't have this problem. ListBackgroundModifier already does:

content
    .scrollContentBackground(.hidden)
    .background(Color(argb: argb))

which extends through the inset. So the same screen built on a <list> renders correctly and one built on a <scroll-view> doesn't — and the workaround people land on is rebuilding screens around a list to fix what is really a paint bug.

The fix

ScrollViewBackgroundModifier, applied to the three ScrollView chains, giving them the same reach as the list:

content
    .scrollContentBackground(.hidden)
    .background(Color(argb: argb).ignoresSafeArea())

Gated on node.style?.bgColor (with the same dark_bg_color precedence the list modifier uses), so a scroll view that never declared a background is untouched and keeps the system default.

Scope

  • Additive: one modifier struct plus three one-line applications.
  • Only affects scroll views that declare a background.
  • Android is unaffected: Compose lays out and paints these differently, and its scroll containers already draw the declared background edge to edge.

Verified

Built and run on an iOS 26 simulator against a themed app. Before: a list-based tab root rendered clean while a scroll-view tab root kept a black band behind the tab bar. After: they match, with the theme colour running edge to edge. Screens with no declared background are unchanged.

Related

Same family as #76 (clearing the List row fill so a declared list background actually shows). Independent of it — different renderer, no overlap — but they're both "a declared background doesn't reach where it should".

A ScrollView is laid out inside the safe area, so a background declared on it
stops short of the home indicator and the window shows through — a band of
systemBackground behind the tab bar on an otherwise themed screen.

List does not have this problem: ListBackgroundModifier already does
.scrollContentBackground(.hidden).background(...), which extends through the
inset. So the same screen built on a <list> looks right and one built on a
<scroll-view> does not, and the workaround becomes rebuilding screens around a
list to fix what is really a paint bug.

Give the scroll view the same reach. Gated on the node actually declaring a
background, so a scroll view that never asked for one is untouched and keeps
the system default.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant