274773 2024-05-28 04:46:24 -0700 env(safe-area-inset-*) always returns 0 2024-06-04 04:47:14 -0700 1 1 1 Unclassified WebKit CSS Safari 17 Unspecified Unspecified NEW InRadar P2 Normal --- 1 contact webkit-unassigned ap koivisto thorton webkit-bug-importer wenson_hsieh oldest_to_newest 2038173 0 471525 contact 2024-05-28 04:46:24 -0700 Created attachment 471525 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. 2038207 1 ap 2024-05-28 09:36:58 -0700 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. 2038222 2 contact 2024-05-28 10:49:12 -0700 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 2038276 3 ap 2024-05-28 14:05:59 -0700 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. 2039620 4 webkit-bug-importer 2024-06-04 04:47:14 -0700 <rdar://problem/129213964> 471525 2024-05-28 04:46:24 -0700 2024-05-28 04:46:24 -0700 reduction of the safe area reading technique safe-area-tester.html text/html 1613 contact PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDx0aXRsZT48L3Rp dGxlPgogICAgPG1ldGEgY2hhcnNldD0iVVRGLTgiIC8+CiAgICA8bWV0YQogICAgICBuYW1lPSJ2 aWV3cG9ydCIKICAgICAgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxl PTEuMCwgbWF4aW11bS1zY2FsZT0xLjAsIHVzZXItc2NhbGFibGU9bm8sIHZpZXdwb3J0LWZpdD1j b3ZlciIKICAgIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHN0eWxlPgogICAgICA6cm9vdCB7 CiAgICAgICAgLS1zYXQ6IGVudihzYWZlLWFyZWEtaW5zZXQtdG9wKTsKICAgICAgICAtLXNhcjog ZW52KHNhZmUtYXJlYS1pbnNldC1yaWdodCk7CiAgICAgICAgLS1zYWI6IGVudihzYWZlLWFyZWEt aW5zZXQtYm90dG9tKTsKICAgICAgICAtLXNhbDogZW52KHNhZmUtYXJlYS1pbnNldC1sZWZ0KTsK ICAgICAgfQogICAgPC9zdHlsZT4KICAgIFRoZSBzYWZlIGFyZWEgaW5zZXRzIGZvciB0aGlzIGRl dmljZSBhcmU6CgogICAgPHA+VG9wOiA8c3BhbiBpZD0idG9wIj48L3NwYW4+PC9wPgoKICAgIDxw PkJvdHRvbTogPHNwYW4gaWQ9ImJvdHRvbSI+PC9zcGFuPjwvcD4KCiAgICA8cD5MZWZ0OiA8c3Bh biBpZD0ibGVmdCI+PC9zcGFuPjwvcD4KCiAgICA8cD5SaWdodDogPHNwYW4gaWQ9InJpZ2h0Ij48 L3NwYW4+PC9wPgogICAgPHNjcmlwdD4KICAgICAgc2V0VGltZW91dCgoKSA9PiB7CiAgICAgICAg Y29uc3Qgc2F0ID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdl dFByb3BlcnR5VmFsdWUoCiAgICAgICAgICAiLS1zYXQiCiAgICAgICAgKTsKCiAgICAgICAgY29u c3Qgc2FiID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFBy b3BlcnR5VmFsdWUoCiAgICAgICAgICAiLS1zYWIiCiAgICAgICAgKTsKCiAgICAgICAgY29uc3Qg c2FsID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3Bl cnR5VmFsdWUoCiAgICAgICAgICAiLS1zYWwiCiAgICAgICAgKTsKCiAgICAgICAgY29uc3Qgc2Fy ID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpLmdldFByb3BlcnR5 VmFsdWUoCiAgICAgICAgICAiLS1zYXIiCiAgICAgICAgKTsKCiAgICAgICAgY29uc3QgdG9wTyA9 IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJ0b3AiKTsKICAgICAgICB0b3BPLnRleHRDb250ZW50 ID0gc2F0OwoKICAgICAgICBjb25zdCBib3R0b21PID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQo ImJvdHRvbSIpOwogICAgICAgIGJvdHRvbU8udGV4dENvbnRlbnQgPSBzYWI7CgogICAgICAgIGNv bnN0IGxlZnRPID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoImxlZnQiKTsKICAgICAgICBsZWZ0 Ty50ZXh0Q29udGVudCA9IHNhbDsKCiAgICAgICAgY29uc3QgcmlnaHRPID0gZG9jdW1lbnQuZ2V0 RWxlbWVudEJ5SWQoInJpZ2h0Iik7CiAgICAgICAgcmlnaHRPLnRleHRDb250ZW50ID0gc2FyOwoK ICAgICAgICBjb25zb2xlLmxvZyhzYXQpOwogICAgICB9LCAxMDAwKTsKICAgIDwvc2NyaXB0Pgog IDwvYm9keT4KPC9odG1sPgo=