Hello,
As previous reports have already shown, there seems to be a few issues on the latest version of Safari, mainly around:
- Modals taking up the full viewport
- Elements positioned at the bottom of the screen
This also seems to affect the modals on apple.com/iphone.
I've recently done an analysis of what can and can't be done in code to work with the new liquid glass UI and thought I'd share my findings here.
The full write up, along with screenshots and the demos I used are available in this repository: https://github.com/stevenocchipinti/liquid-glass-spike
A brief summary of the findings:
The conditions for a fullscreen modal overlay element to cover the entire screen with a
position: fixed;seems to be:
- The background must be semi-transparent
- Solid colours, linear-gradients, etc. don't work
- The container must be empty
This also means the standard <Dialog> and ::backdrop don't seem to work.
The conditions for a bottom sheet to cover the entire screen, including the area around the Safari toolbar seems to be:
- The element must be positioned within 3px from the bottom of the viewport
- The height must be within a certain threshold
If I've missed anything, please let me know.
It would be really nice to have some official documentation on these issues to explain to developers how to do this properly.