Bug 234639

Summary: CSS transform: scale allied with box-shadow cause rendering glitch
Product: WebKit Reporter: Pedro Paulo <pedropaulosuzuki1>
Component: Layout and RenderingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: bfulgham, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Other   
Hardware: Other   
OS: Linux   
Attachments:
Description Flags
Scales a div with a box-shadow and a transition none

Pedro Paulo
Reported 2021-12-23 07:23:02 PST
Created attachment 447878 [details] Scales a div with a box-shadow and a transition Hello everyone! Hope y'all doing well! Today I was testing one of my websites on GNOME Web 41.0 and I found out a visual glitch related to scaling (transform: scale(X);) when a box-shadow is applied (drop-shadow(0 0 shadow-size #hex-color;) and a transition (transition: transform transform-interval easing-function;) is also applied. It happened on a friend's iPhone too, on Safari. I created a minimal working example down below and I used a :hover state for applying the transform, as it seems to only happen when there is a back-and-forth with the container size. For you to reproduce, open the test file with a Webkit-based browser, then just hover over the green square. No issues seem to happen on Firefox and Chromium-based browsers, so it seems to be a Webkit issue. ## Minimal example: ```html <html> <head> <style> body { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; } div { width: 180px; height: 270px; background-color: #7e7; filter: drop-shadow(0 0 50px #000f); transition: transform 50ms ease-in-out; } div:hover { transform: scale(1.2); } </style> </head> <body> <div></div> </body> </html> ``` Tested on GNOME Web 41.0 Flatpak (WebKitGTK 2.34.2) on Linux and on Safari in a friend's iPhone (probably up to date, but I cannot confirm if that holds true). Might be related to #61234 (https://bugs.webkit.org/show_bug.cgi?id=61234), but I tested their example on GNOME Web 41.0 and it had no issues, so this issue seems to be different in some way, shape or form. (BTW, maybe #61234 can be closed? IDK). Thanks!
Attachments
Scales a div with a box-shadow and a transition (430 bytes, text/html)
2021-12-23 07:23 PST, Pedro Paulo 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-12-30 07:23:20 PST
<rdar://problem/87013865>
Simon Fraser (smfr)
Comment 2 2022-01-04 10:08:06 PST
Thanks for the report, I can reproduce. Looks bad!
Simon Fraser (smfr)
Comment 3 2022-03-03 21:29:32 PST
*** This bug has been marked as a duplicate of bug 207586 ***
Note You need to log in before you can comment on or make changes to this bug.