# black-translucent viewport geometry on iOS
> On iOS 18.6.2 black-translucent with viewport-fit=cover gave a Home Screen app a 402 x 874 viewport with a 62 px top safe-area inset.
import LabEvidenceLine from '@components/lab/LabEvidenceLine.astro';
import LabHarnessLinks from '@components/lab/LabHarnessLinks.astro';
import LabResults from '@components/lab/LabResults.astro';
import LabBacks from '@components/lab/LabBacks.astro';
import LabProvenance from '@components/lab/LabProvenance.astro';
With `` and `viewport-fit=cover`, does an iOS 18.6.2 Home Screen web app draw the page under the status bar, and what viewport size and `env(safe-area-inset-*)` values does the page see compared with the default style?
With black-translucent and viewport-fit=cover together, the app had a 402 x 874 viewport and a 62 px top safe-area inset. We measured this on 2026-10-20 on an iPhone 16 Pro running iOS 18.6.2 (22G100).
## Status-bar styles and inset reads
The page `/lab/device-tests/t4/sbs-black-translucent/` was installed from Safari as its own app ("SBS transl", own manifest with `display: standalone`). It declares `apple-mobile-web-app-status-bar-style: black-translucent`, the viewport `width=device-width, initial-scale=1, viewport-fit=cover`, a `theme-color` of `#161616` and a static blue (`#0f62fe`) header 56 px high with no safe-area padding at the top of the page.
An agent read the page over USB while the app was in front (09:31:04 UTC, N55). The read captured `innerWidth` and `innerHeight`, the four safe-area insets measured with a probe element, the status-bar-style and viewport metas as parsed, the element and colour at the top of the viewport, and `prefers-color-scheme`. Two comparisons use the same kind of read:
- the default status-bar style (no meta) in the PWA Lab app, on the baseline, fixed, sticky and safe-area variants, where safe-area also sets `viewport-fit=cover` (N25 to N29);
- the same `black-translucent` page in a Safari tab (N51).
## How to run
1. In Safari, open `https://openpwa.net/lab/device-tests/t4/sbs-black-translucent/`, then **Share** → **Add to Home Screen** → **Add**.
2. Open "SBS transl" from its icon and keep it at the top of the page. The page prints its own probe block, but use the console read below for the insets: the printed `safe-area-inset-top` can be computed before the insets apply at launch (anomaly A11 in the report).
3. With Web Inspector (Mac Safari → **Develop** → your iPhone → the app), run: `const p = document.createElement('div'); p.style.cssText = 'position:fixed;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)'; document.body.append(p); [innerWidth, innerHeight, getComputedStyle(p).paddingTop, getComputedStyle(p).paddingBottom]`.
4. Without Web Inspector, check by eye whether the blue header sits behind the time and battery, and take a screenshot.
5. For the comparison, open `https://openpwa.net/lab/device-tests/` as a Home Screen app, open the **safe-area** variant from its T4 table and run the same console line.
6. Optional: run the line in a Safari tab on the `sbs-black-translucent` URL.
## Results
On iOS 18.6.2 the `black-translucent` app filled the screen. It returned `standalone` `true`, with inner size 402 x 874, `safe-area-inset-top` 62 px, right 0, bottom 34 px, left 0, with the blue header at top 0 and rgb(15, 98, 254) as the colour at the top of the viewport (A, N55). With the default style the viewport started 62 px lower, with inner height 812 of 874 and top inset 0 on every variant, and `viewport-fit=cover` changed only the bottom inset, to 34 px (A, N25 to N29). In a Safari tab the same `black-translucent` page read 402 x 678 with all insets 0 (A, N51). The confidence label is A. The operator reported the blue header behind white status-bar text (O); no screenshot of this app was delivered.
| Page | status-bar-style | `viewport-fit` | inner size | inset top / bottom | Notebook |
|---|---|---|---|---|---|
| baseline, fixed, sticky (app) | none | not set | 402 x 812 | 0 / 0 | N25, N26, N28 |
| safe-area (app) | none | cover | 402 x 812 | 0 / 34 | N29 |
| SBS transl (app) | black-translucent | cover | 402 x 874 | 62 / 34 | N55 |
| SBS transl (Safari tab) | black-translucent | cover | 402 x 678 | 0 / 0 | N51 |
:::caution
The apps with `apple-mobile-web-app-status-bar-style` set to `default` or `black` were not installed in this run, and an earlier operator answer about them ("all black") is void (N50-a).
:::
## Full-screen content and safe-area rules
Apple's archived meta-tag reference says the tag "has no effect unless you first specify full-screen mode", that with `default` or `black` "the web content is displayed below the status bar", and that with `black-translucent` "the web content is displayed on the entire screen, partially obscured by the status bar" ([Supported Meta Tags](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html), developer.apple.com). Firtman's notes mark the tag as superseded by the `theme-color` meta since iOS 15, but keep `black-translucent` as "Still the only way to get a fullscreen app" ([iOS PWA Compatibility](https://firt.dev/notes/pwa-ios/), firt.dev). The insets come from the `safe-area-inset-*` environment variables, measured from the edges of the viewport ([CSS Environment Variables](https://drafts.csswg.org/css-env-1/#safe-area-insets), csswg.org); `viewport-fit=cover` sizes the viewport to the rectangle that circumscribes the screen ([CSS Round Display, `viewport-fit`](https://drafts.csswg.org/css-round-display/#viewport-fit), csswg.org). This run tested `black-translucent` only together with `viewport-fit=cover`.
The instrumented read agrees with Apple's archived text and Firtman's note. In the app the page is drawn over the full screen and the 62 px top inset tells it where the status bar is, while the Safari tab read of the same page showed neither the full-height viewport nor any inset. The default-style reads add a detail the sources leave out: without `black-translucent`, `viewport-fit=cover` does not move the top edge. Apple's "black and translucent" describes the bar's look, which was not measured beyond the operator's report. The study counts this as a confirmation with measured values, not a new finding.
## Data
From the [iOS 18.6.2 data package](/research/2026-10-ios18-home-screen-web-apps/data/) (CC BY 4.0):
- [`raw/2026-10-20-ios18.6.2-N55-app-sbs-transl.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-N55-app-sbs-transl.json) and its `.meta.json`: the app read (N55).
- [`raw/2026-10-20-ios18.6.2-N51-tab-sbs-transl.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-N51-tab-sbs-transl.json): the Safari tab read (N51).
- [`raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step15r-t4-baseline.json), [`raw/2026-10-20-ios18.6.2-step16-app-t4-fixed.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-fixed.json), [`raw/2026-10-20-ios18.6.2-step16-app-t4-sticky.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-sticky.json) and [`raw/2026-10-20-ios18.6.2-step16-app-t4-safe-area.json`](/research/2026-10-ios18-home-screen-web-apps/data/raw/2026-10-20-ios18.6.2-step16-app-t4-safe-area.json): the default-style comparison (N25 to N29).
- Screenshot [`2026-10-20_iphone16pro_ios18.6.2_T4_4.png`](/research/2026-10-ios18-home-screen-web-apps/data/screenshots/2026-10-20_iphone16pro_ios18.6.2_T4_4.png): the safe-area variant, its header below the strip.
Notebook entries N25 to N29, N50-a, N51 and N55: [`2026-10-ios18-baseline.md`](/research/2026-10-ios18-home-screen-web-apps/data/2026-10-ios18-baseline.md). Rows: [`/lab/results.json`](/lab/results.json). Cite as "OpenPWA device test, 2026-10-20, iPhone 16 Pro, iOS 18.6.2 (22G100), N55".
## Related reference entries
The result supports the statements that `black-translucent` with `viewport-fit=cover` still produces a full-height page on iOS 18, with the top inset to pad against.
## Limits
- One instrumented read of the app (N55), no screenshot (T4b_1 to T4b_3 were not delivered). The white status-bar text and the header behind the time rest on the operator's report.
- The page's own probe block printed `safe-area-inset-top: 0px` while the agent's read at the same moment gave 62 px; `innerHeight` 874 supports 62 px, and the cause (the block computed before the insets applied) is unverified (anomaly A11).
- `default` and `black` were not installed as separate apps, and `black-translucent` without `viewport-fit=cover` was not tested.
- Portrait and Light appearance only. Scrolling content under the bar was not reported.
- One iPhone 16 Pro, one build, one operator. Claims that the tag has no effect on iOS 27 ([Modern Web Weekly #80](https://modernwebweekly.substack.com/p/so-whats-up-with-the-ios27-blur), substack.com) were not tested; this is their 18.6.2 baseline.