Bug 281071 – REGRESSION (iOS 18): Safe-area-inset-bottom not working

• Status: NEW
• Component: WebCore Misc.

[Taylor]

It seems the latest version of safari on the newly updated iOS (only a few weeks old as of this post) has a bug relating to safe-area-inset-bottom. A fixed bottom nav displays fine, and adjusts on scroll up/down as the address bar shrinks and expands, but if there is a use action that causes the address bar to auto-expand, it is overtop of the fixed content.

[Radar WebKit Bug Importer]

<rdar://problem/137523644>

[Simon Fraser (smfr)]

Could you please attach a screen recording of the behavior you are describing, and a link to a page where it occurs?

[Taylor]

Created attachment 472861 [details]
Screen recording

Hi the url to test is https://casa.touchlessapis.com/

Please find attached the recording, I show the issue is not happening on ios17.4 simulator. To specifically recreate the bug: you must scroll down so that to address bar minifies, then you must either go to another page, or add a filter, the address bar expands and covers the fixed bottom nav. If you scroll up however, where the address bar more smoothly expands, its fine.

[Simon Fraser (smfr)]

Your screen recording is using two different device types on the two OS versions. Did you confirm that it reprocess with the same device type on both sides?

[Taylor]

(In reply to Simon Fraser (smfr) from comment #4)
> Your screen recording is using two different device types on the two OS
> versions. Did you confirm that it reprocess with the same device type on
> both sides?

No, the whole point is that it works fine on IOS17, and the bug was introduced in IOS18.

[Taylor]

Created attachment 472883 [details]
LambdaTest iPhone 15 Pro 17 and 18

I was able to use LambdaTest to show on the same device (iPhone 15) the issue only occurs on ios18. It seems this is definitely a new bug with the latest webkit.

[Simon Fraser (smfr)]

Thank you for confirming.

[Taylor]

Created attachment 472895 [details]
trying to use dynamic window.innerHeight variable

Still struggling with this, but this insight might help. Im trying to brute force a fix by having a window resize event that automatically sets the window.innerHeight has a css variable, its not updating as the address bar expands. It seems its a core issue with safari.

[Jessica Cheung]

Hi Taylor, 
I've tested this on iOS 18.0.1 (iPhone 14 Pro Max & iPhone 14 Pro) and it seems that the site does not have this issue anymore. Can you confirm or deny on your end? Thanks!