env(safe-area-inset-*) always returns 0

• Component: CSS
• Status: NEW ---

[Ben Frain]

Created attachment 471525 [details]
reduction of the safe area reading technique

For the longest time it has been possible to get the value or the iOS safe areas using the following technique:

```css
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}
```

And then read that value with JS:

```js
getComputedStyle(document.documentElement).getPropertyValue("--sat")
```

However this no longer works. I have tried adding this behind a timeout of 5s but it remains at zero. Attachment is a reduction of the technique.

The environment variable should resolve to the safe area inset value.

[Alexey Proskuryakov]

Thank you for the report. Could you please specify your exact iOS version, and also provide detailed steps to reproduce?

Notably, I cannot reproduce this in landscape orientation on iPhone 15 Pro, but I have a newer WebKit build. It is AFAICT expected to get zeroes in portrait orientation.

[Ben Frain]

Hi Alex, 17.5.1. 

But yes, I was expecting a value back in portrait, as there used to be in prior versions. 

Could you clarify why this now returns 0px? How do we account for the dynamic island area etc in JS?

Are there any recents posts/docs on the WebKit blog that explain the newer behaviour?

Thanks, Ben

[Alexey Proskuryakov]

What makes me say it is that there are no scroll bars or anything else to avoid in this test case. Maybe a test case with more content and scrolling also gets 0, and that's more obviously an issue?

I'm not an expert on this feature, hopefully one of the folks I CC'ed can chime in with a deeper answer.

[Radar WebKit Bug Importer]

<rdar://problem/129213964>