[Webkit-unassigned] [Bug 247546] New: element.animate on pseudoElement can overflow border-radius

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Sun Nov 6 06:55:27 PST 2022


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

            Bug ID: 247546
           Summary: element.animate on pseudoElement can overflow
                    border-radius
           Product: WebKit
           Version: Safari 16
          Hardware: Unspecified
                OS: macOS 13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: sorvell at google.com
                CC: dino at apple.com, graouts at apple.com

When `element.animate` is called with a `pseudoElement` target (e.g. `::after`) and the pseudo element is transformed (e.g. via `scale`) to be larger than the containing element's dimensions and the element has `overflow: hidden` with a `border-radius` set, the psuedo-element incorrectly overflows the element's border-radius during the animation. Note, this behavior does not occur on Chrome or Firefox.


REPRODUCTION: https://lit.dev/playground/#gist=c313d05987201bea072e2d5f6381a67e.

WORKAROUND: Applying an explicit `transform: scale(1)` to the containing element fixes the issue.

-- 
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/20221106/5b27de32/attachment.htm>


More information about the webkit-unassigned mailing list