Once upon a Unix timestamp, WebKit added a set of CSS attributes, and viewport-fit meta tag, to help developers adjust their web apps for the iPhone X.
Although these attributes still work for the iPhone, I am surprised that these features does not work in iPadOS 26, which of course, featured more rounded corners, and a new windowed mode with the "traffic light" window controls overlaying each running app.
This image below shows the exact same demo running on iPadOS 26.0 (23A341). When I thought Apple would use the same env() variables to re-adjust the layout of web apps to be more immersive in windowed mode, This is what I got with:
- The window controls covering the "Blog" link. Imagine if another app has a hamburger menu icon blocked by the same controls
- A black gap between the viewport content and the top window edge.
It could have been better to allow env(safe-area-inset-top) to offset the site content from the window decoration/controls, while maintaining the immersive look and feel for the new iPadOS (and possibly macOS, too).
Unless when the web app developers want to replicate the common Mac look and feel, with window controls properly aligned with the website's navigation bar. CSS Window Controls Overlay API has been made for this purpose.
Using the demo from https://amandabaker.github.io/pwa/explainer-example/index.html, we can confirm that this works with both macOS and Windows.
But for iPadOS? Nope.
Top comments (0)