234639 2021-12-23 07:23:02 -0800 CSS transform: scale allied with box-shadow cause rendering glitch 2022-03-03 21:29:32 -0800 1 1 1 Unclassified WebKit Layout and Rendering Other Other Linux RESOLVED DUPLICATE 207586 InRadar P2 Normal --- 1 pedropaulosuzuki1 webkit-unassigned bfulgham simon.fraser webkit-bug-importer zalan oldest_to_newest 1826552 0 447878 pedropaulosuzuki1 2021-12-23 07:23:02 -0800 Created attachment 447878 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! 1827243 1 webkit-bug-importer 2021-12-30 07:23:20 -0800 <rdar://problem/87013865> 1827989 2 simon.fraser 2022-01-04 10:08:06 -0800 Thanks for the report, I can reproduce. Looks bad! 1848167 3 simon.fraser 2022-03-03 21:29:32 -0800 *** This bug has been marked as a duplicate of bug 207586 *** 447878 2021-12-23 07:23:02 -0800 2021-12-23 07:23:02 -0800 Scales a div with a box-shadow and a transition box_shadow_transform_scale.html text/html 430 pedropaulosuzuki1 PGh0bWw+Cgk8aGVhZD4KCQk8c3R5bGU+CgkJCWJvZHkgewoJCQkJZGlzcGxheTogZmxleDsKCQkJ CWFsaWduLWl0ZW1zOiBjZW50ZXI7CgkJCQlqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKCQkJCXdp ZHRoOiAxMDB2dzsKCQkJCWhlaWdodDogMTAwdmg7CgkJCX0KCQkKCQkgICAgZGl2IHsKCQkJCXdp ZHRoOiAxODBweDsKCQkJCWhlaWdodDogMjcwcHg7CgkJCQliYWNrZ3JvdW5kLWNvbG9yOiAjN2U3 OwoJCQkJZmlsdGVyOiBkcm9wLXNoYWRvdygwIDAgNTBweCAjMDAwZik7CgkJCQl0cmFuc2l0aW9u OiB0cmFuc2Zvcm0gNTBtcyBlYXNlLWluLW91dDsKCQkJfQoJCQkKCQkJZGl2OmhvdmVyIHsKCQkJ CXRyYW5zZm9ybTogc2NhbGUoMS4yKTsKCQkJfQoJCTwvc3R5bGU+Cgk8L2hlYWQ+Cgk8Ym9keT4K CQk8ZGl2PjwvZGl2PgoJPC9ib2R5Pgo8L2h0bWw+Cg==