[Webkit-unassigned] [Bug 233469] New: iOS Safari CSS clip-path applied incorrectly inside overflow hidden container

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=233469

            Bug ID: 233469
           Summary: iOS Safari CSS clip-path applied incorrectly inside
                    overflow hidden container
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: iPhone / iPad
                OS: iOS 15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: post at jelmerdemaat.nl

Created attachment 445078

  --> https://bugs.webkit.org/attachment.cgi?id=445078&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211124/d79ac274/attachment.htm>