ReviewOS

craft-native/craft

Hiding the scroll edge effect removes the legibility scrim: content collides with the status bar and navigation title

#430
Closed glennmichael123 opened this 3 days ago ·
3 days ago

c649fef8 (v0.0.388) fixed the grey wash reported in #426 — confirmed on device against v0.0.395, at both edges. Content now scrolls visibly under the floating chrome instead of behind a grey band.

But it hides the edge effect outright:

scroll?.topEdgeEffect.isHidden = topEdgeToEdge && !navigationBarSolid
scroll?.bottomEdgeEffect.isHidden = tabbedScroll

The edge effect was not only a background wash. It was also the only thing separating scrolled content from the status bar and the navigation title. With it hidden and the bar transparent, nothing at the top edge provides that separation, and content passes under the chrome perfectly sharp.

What it looks like

On a screen whose first child is its scroll view (topEdgeToEdge == true, navigationBarSolid == false), scrolling down:

  • body content collides with the status-bar clock and the battery/Wi-Fi icons
  • content collides with the navigation title — in our case a blue "Plan 7 days" button sits directly on top of the centred title, both fully legible, neither readable
  • a search field's placeholder renders immediately beneath the clock

The bottom edge does not show this, because the floating tab bar keeps its own glass material — content is visibly blurred behind it while the top is sharp. So the regression is specific to the top edge.

Suggestion

UIScrollEdgeEffect has a style, and isHidden is not the only way to lose the band:

UIScrollEdgeEffectStyle.hardStyle   // "a hard cutoff and dividing line"  <- the grey band in #426
UIScrollEdgeEffectStyle.softStyle   // "a soft-edged scroll edge effect"
UIScrollEdgeEffectStyle.automaticStyle

softStyle looks like the intended middle ground: a gradual blur as content approaches the edge, with no hard band and no dividing line. That keeps the floating-chrome look the fix was after while content stays readable as it passes under the status bar and the title.

Worth considering whether the top edge wants style = .softStyle rather than isHidden = true, and whether the bottom should match rather than relying on the tab bar's material (a screen with floating chrome but no tab bar would have neither).

Environment

  • Craft v0.0.395, Xcode 26.6, iOS 26.5 simulator
  • Screen: a native screen that begins with its scroll view, navigationBarSolid: false, large title
3 days ago

Third reproduction on v0.0.395, on a screen whose occluded content is data rather than controls.

Screen: a performance/progress screen, large title, navigationBarSolid: false, first child is its scroll view (topEdgeToEdge == true). Chart card with a legend row above it.

What collides: scrolling the chart card up puts its legend under the status bar with nothing between them. The series labels and their current values render sharp on top of the system chrome:

  • Fitness and its value sit directly over the clock
  • Fatigue is sliced vertically by the Dynamic Island, so only its first letters are readable
  • Form's value lands beside the island, in the gap between it and the battery

The navigation title stays legible here only because it is centred and the legend happens to straddle it.

Why it may be worth a separate note: the two cases already described are a button and a search placeholder, both of which a reader can recognise as interface and mentally subtract. A chart legend is the key to the data underneath it, so when Fatigue is half-eaten by the island there is no affordance saying something is occluded. It reads as a rendering fault rather than as content passing under chrome.

This supports softStyle over isHidden rather than changing the diagnosis: a gradual blur as content approaches the edge would keep the floating chrome and stop a legend from competing with the clock for the same pixels.

Environment: craft-native v0.0.395, iOS 26.5 simulator, an enterprise white-label build (dark theme, black screen background).

3 days ago

Implemented on main in baf99c8.

The top scroll-edge effect remains visible and uses .soft when content extends beneath floating navigation. Solid navigation and a replaced primary scroller restore .automatic behavior. The tab bar retains its native material; this does not remove bottom glass.

Validation: 61 native layout tests passed for this change, including chrome pixel/geometry and effect cleanup assertions. Subsequent integrated native tests also passed. These are maintained native fixtures, not a claim that the external enterprise app was run.

The additional reproduction uses v0.0.395, which predates this fix. This change is on main and has not been released; consumers will need a version containing it and a regenerated iOS shell. Full hosted CI/Mobile E2E on the latest main are pending.

Closing the implementation issue; this does not claim publication or green hosted validation.

3 days ago

Shipped in v0.0.396: the iOS 26 top scroll edge uses the soft effect while preserving native bottom glass. Full CI and Mobile E2E passed on the exact release commit; GitHub assets, Pantry publication, and all eight npm packages are verified.

Upgrade to 0.0.396 and regenerate the iOS shell. Validation covers the maintained native fixtures; the external enterprise app still needs its own acceptance check.

Sign in to comment on this issue.