247546 – element.animate on pseudoElement can overflow border-radius

Bug 247546 - element.animate on pseudoElement can overflow border-radius

Summary: element.animate on pseudoElement can overflow border-radius

Status:	RESOLVED CONFIGURATION CHANGED

Alias:	None

Product:	WebKit
Classification:	Unclassified
Component:	Animations (show other bugs)
Version:	Safari 16
Hardware:	Unspecified macOS 13

Importance:	P2 Normal
Assignee:	Nobody

URL:
Keywords:

Depends on:
Blocks:

Reported:	2022-11-06 06:55 PST by sorvell
Modified:	2022-11-09 16:06 PST (History)
CC List:	3 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.

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.