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!
<rdar://problem/87013865>
Thanks for the report, I can reproduce. Looks bad!
*** This bug has been marked as a duplicate of bug 207586 ***