iOS Safari CSS clip-path applied incorrectly inside overflow hidden container

• Component: CSS
• Status: RESOLVED DUPLICATE

[Jelmer de Maat]

Created attachment 445078 [details]
HTML file showing the bug on iOS

Bug #231852 status is RESOLVED FIXED, but it isn't fixed.

Attached HTML file shows multiple examples of an incorrectly applied CSS `clip-path` when the parent element has an `overflow` of:

- hidden
- auto
- overlay
- scroll

The `clip-path` is correctly restored when an animation is applied to the target element. Note that the defined SVG clip path has an attribute of clipPathUnits="objectBoundingBox".

This happens on iOS Safari in every version I test it with (13, 14, 15).

When `transform: translate3d(0,0,0):` is applied to the target <img> element, the entire element disappears. Not sure if related to this issue.

This last issue also appears in Safari for macOS.

Link to the same attachment as Codepen demo: https://codepen.io/jelmerdemaat/pen/WNEPjJO

[Alexey Proskuryakov]

Bug 231852 was fixed just a month ago, and the fix hasn't shipped in iOS yet (we cannot discuss the timeline of when it will ship). You can verify the fix on macOS with Safari Technology Preview.

> When `transform: translate3d(0,0,0):` is applied to the target <img> element, the entire element disappears. Not sure if related to this issue.

This still reproduces. Please file a new report if you believe this to be a WebKit bug.

*** This bug has been marked as a duplicate of bug 231852 ***

[Jelmer de Maat]

Thanks, works in Safari Technology Preview indeed. Sorry I hadn't realised it being fixed already.

Will take a closer look at the other issue and submit a new one.

[Jelmer de Maat]

Created a new issue at https://bugs.webkit.org/show_bug.cgi?id=233553