ReviewOS

craft-native/craft

Tab bar keeps UIKit's floating glass: the bottom chrome is not transparent the way the top now is

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

Since #426 and #430, the top chrome is transparent and content shows through it properly. The bottom is not, and the two should match.

The asymmetry is in the code

The navigation bar has a full appearance path, including clearing it so the bar is transparent when a screen asks for no background (CraftNativeScreen.swift):

navigationItem.standardAppearance = nil
navigationItem.scrollEdgeAppearance = nil
...
let appearance = UINavigationBarAppearance()
appearance.configureWithOpaqueBackground()

The tab bar has none. UITabBarAppearance does not appear anywhere in the iOS templates; the tab bar only ever receives a tint and a hidden flag:

tabBar.tintColor = chrome.tint ?? config.tintColor.flatMap { UIColor(hex: $0) } ?? view.tintColor

So it keeps UIKit's default, which on iOS 26 is the floating glass backdrop, and content behind it is tinted and blurred even on a screen that is otherwise fully edge to edge.

It is not the scroll edge effect

Worth stating, because that was the obvious suspect and it is wrong. The band is static. Scrolling the same screen a long way, sampling the same columns before and after:

  • content column: differs in 225 of 300 samples, so the view definitely scrolled
  • bottom band, left gutter: differs in 0 of 47 samples, pixel for pixel identical

A scroll edge effect varies with scroll position by definition, so this is not one - bottomEdgeEffect.isHidden = tabbedScroll is doing its job. What remains is the bar's own material.

Measured on a light screen, iPhone 17 Pro, iOS 26.5, Craft 0.0.395: a white card fades from #ffffff to #fafafa over the ~33pt approaching the bar, and the page background under the pill reads #e6e6eb against #f2f2f7 elsewhere.

The ask

Give the tab bar the same appearance treatment the navigation bar already gets, so a screen that is edge to edge is edge to edge at both ends rather than only at the top. A UITabBarAppearance configured transparent, cleared by the same rule that clears the navigation bar's, would make the two consistent.

If iOS 26 constrains how far the floating tab bar's material can be removed, that is worth saying plainly in the issue, since it would mean the bottom can never fully match the top and app authors should stop expecting it to.

Why this is not fixable downstream

A Stacks application carries no Swift of its own - the iOS shell is generated from the Craft package at build time - so the tab bar's appearance can only be set here.

3 days ago

Correcting this: the ask above is backwards, and I would rather say so than have someone implement it.

The tab bar is already translucent. On a dark screen content passes behind the pill and stays visible - a bar chart's bars read straight through it. What I measured on a light screen (#ffffff -> #fafafa approaching the bar, #e6e6eb under the pill against #f2f2f7) is that same glass material's tint, which only reads as a grey band because the background is light. It is not an opaque backdrop.

So the asymmetry with the top is real but points the other way:

  • bottom: glass - translucent, blurred, slightly tinted. Content behind it is visible and still legible.
  • top: no material at all since the edge effect was hidden. Content passes under it perfectly sharp and collides with the status bar and the navigation title, which is #430.

The bottom is the better of the two. Stripping the tab bar's material to match the top would reproduce #430 at the other end, and a bar chart or a photo scrolling under a bare tab bar would be worse than what is there now.

What I should have asked for is the inverse, and it is already filed: give the top a material so the two match, per #430's suggestion of UIScrollEdgeEffectStyle.softStyle rather than hiding the effect outright. That makes both ends translucent-with-blur instead of one bare and one glass.

Closing this in favour of #430. Apologies for the noise - the measurement was sound, the conclusion drawn from it was not.

Sign in to comment on this issue.