Bug 247546

Summary:	element.animate on pseudoElement can overflow border-radius
Product:	WebKit	Reporter:	sorvell
Component:	Animations	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED CONFIGURATION CHANGED
Severity:	Normal	CC:	dino, graouts, simon.fraser
Priority:	P2
Version:	Safari 16
Hardware:	Unspecified
OS:	macOS 13

Description sorvell 2022-11-06 06:55:27 PST

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.

Comment 1 Simon Fraser (smfr) 2022-11-09 11:30:06 PST

Does this still reproduce in Safari Tech Preview?

Comment 2 sorvell 2022-11-09 15:57:40 PST

Does not reproduce on Safari Tech Preview. Looks like it's fixed.

Comment 3 Simon Fraser (smfr) 2022-11-09 16:06:51 PST

Thanks for checking.