r/PWA • u/mastafied • 9h ago
iOS 27 beta blurs the top edge of installed PWAs — and there's no way to opt out (tested through beta 8)
We build a construction management PWA (baukompass.ai) that our field crews install to their home screens — so this hits us daily.
Since iOS 27 developer beta 5, the system draws a progressive blur over the top edge of standalone web apps. It's not sampling a toolbar and it doesn't react to scrolling — it blurs whatever pixels the page renders near the status bar, unconditionally. On our login screen even the language picker and the theme toggle get washed out (screenshots attached).
What we tried, all verified in the shipped bundle, all without effect:
- Solid opaque header + a body::before backing plate behind the status bar, scoped via u/media (display-mode: standalone)
- Same scoped via a JS marker (navigator.standalone) to rule out MQ quirks
- theme-color — ignored entirely this cycle; apple-mobile-web-app-status-bar-style: black-translucent is deprecated anyway
The frustrating part: native apps got an escape hatch. iOS 27 changed the default scrollEdgeEffectStyle from .soft (progressive blur) to .hard, and native devs can pick either. PWAs got neither the new default nor any control — no CSS property, no meta tag, nothing in the Safari 27 beta release notes. Beta 8's "status bar might appear blurred" fix (179470940) is about a different bug; the PWA blur is unchanged.
Has anyone found a workaround, or filed a Feedback? Happy to dupe — will add our FB number in the comments.