Bug 245769

Summary: REGRESSION (STP): Animating image inside clipping border-radius ignores overflow hidden
Product: WebKit Reporter: mic.gallego
Component: CompositingAssignee: Simon Fraser (smfr) <simon.fraser>
Status: RESOLVED FIXED    
Severity: Normal CC: graouts, sabouhallawa, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Intel)   
OS: Unspecified   
Attachments:
Description Flags
Hover fails
none
Test reduction none

Description mic.gallego 2022-09-27 23:15:26 PDT
Created attachment 462672 [details]
Hover fails

Hi,

Latest Safari TP has caused a regression on transform, which ignore overflow of parent (I think it may be related to the various fixes done on border radius in latest TP).

I have been unable to recreate a minimal test case so it seems to be a combinaison of various factors. To reproduce it, open this page: https://impact-theme-sound.myshopify.com/pages/paris-saint-germain (if you see a password use rewblo to enter into the store).

Then scroll to the "Master & Dynamics X Paris Saint Germain" at the end of the page, and hover the block (see attached screenshot). Despite the image being in a overflow: hidden container, during the complete animation it is visible outside the parent bounds.
Comment 1 Alexey Proskuryakov 2022-09-28 10:32:37 PDT
I can reproduce with STP 154.

Testing notice: logging in sends you back to the landing page, so you need to go to https://impact-theme-sound.myshopify.com/pages/paris-saint-germain again.
Comment 2 Radar WebKit Bug Importer 2022-09-28 10:32:51 PDT
<rdar://problem/100514998>
Comment 3 Simon Fraser (smfr) 2022-10-03 18:09:05 PDT
Created attachment 462775 [details]
Test reduction
Comment 4 Simon Fraser (smfr) 2022-10-31 15:37:10 PDT
Pull request: https://github.com/WebKit/WebKit/pull/5983
Comment 5 EWS 2022-11-01 16:29:00 PDT
Committed 256202@main (c91af32319e7): <https://commits.webkit.org/256202@main>

Reviewed commits have been landed. Closing PR #5983 and removing active labels.