Bug 231360

Summary:	Overflow hidden with border radius not applied correctly for animated pseudo element
Product:	WebKit	Reporter:	moritz.mt99
Component:	Animations	Assignee:	Nobody <webkit-unassigned>
Status:	RESOLVED CONFIGURATION CHANGED
Severity:	Normal	CC:	ahmad.saleem792, dino, graouts, graouts, simon.fraser, webkit-bug-importer, zalan
Priority:	P2	Keywords:	BrowserCompat, InRadar
Version:	Safari 15
Hardware:	Mac (Apple Silicon)
OS:	macOS 11
See Also:	https://bugs.webkit.org/show_bug.cgi?id=140535

Description moritz.mt99 2021-10-07 06:49:20 PDT

When animating transform: translateX on a pseudo element, the element does not respect the parent overflow: hidden attribute.

See this example: https://codesandbox.io/s/safari-css-overflow-hidden-pseudo-bug-19108?file=/index.html

You can see that the "shine/pulse" effect on this progress bar, renders outside the parent element as well. The expected behavior would be for the overlapping content of the pseudo element at the border corners to be cut off.

This example is working correctly in Chrome.

Safari Version: Version 15.0 (16612.1.29.41.4, 16612)
OS Version: macOS Big Sur 11.6 (20G165)
Hardware: MacBook Pro (13-inch, M1, 2020)

Comment 1 Radar WebKit Bug Importer 2021-10-11 10:43:18 PDT

<rdar://problem/84106074>

Comment 2 Antoine Quint 2022-02-01 02:58:10 PST

I expect this is a compositing bug with clipping. Simon, could you take a look?

Comment 3 Simon Fraser (smfr) 2022-02-01 09:45:13 PST

Probably bug 140535.

Comment 4 Ahmad Saleem 2023-03-09 05:18:53 PST

I am not able to reproduce this bug in Safari Technology Preview 165 and WebKit ToT (261422@main) and it does not cause on left side that the pulse is outside of parent container.

Can someone else confirm and we can mark this as "RESOLVED CONFIGURATION CHANGED"? Thanks!

Comment 5 Simon Fraser (smfr) 2023-03-09 10:59:25 PST

Yeah, fixed with the border-radius/composited layer fix a while back.