🗒️ Answer
If you’re facing problems with the CSS clip-path property not working when zooming in on iOS/Safari/iPhone, you’re not alone. Developers have reported issues, and it seems to be related to bugs in Safari’s rendering of the clip-path property.
When using clip-path for visibility toggling in navigation menus, it may not behave as expected when zooming on iOS devices [Stack Overflow].
There’s a known bug in iOS 16 Safari related to clip-path, position fixed, and zooming. The issue involves white text positioned fixed inside a parent container using clip-path: inset(0) on the parent container [Apple Developer Forums]
The CSS Tricks Almanac provides an overview of the clip-path property, explaining how it allows you to specify a specific region of an element to display, hiding the rest [CSS Tricks].
In a Flutter GitHub issue, it’s mentioned that ClipOval masking is off on iOS (all browsers), and there are problems with svg clip paths not being correctly adjusted during zooming [Flutter GitHub].
Another GitHub issue highlights a problem with CSS clip-path only working properly on the first element in Safari, especially when applied to multiple elements using the same path [GitHub Issue].
An older discussion from 2011 on SitePoint mentions rounding errors with background images when zooming in/out on iOS Safari [SitePoint].
