Bug 234639

Summary:

CSS transform: scale allied with box-shadow cause rendering glitch

Product:

WebKit

Reporter:

Pedro Paulo <pedropaulosuzuki1>

Component:

Layout and Rendering

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED DUPLICATE

Severity:

Normal

CC:

bfulgham, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Other

Hardware:

Other

OS:

Linux

Attachments:

Description	Flags
Scales a div with a box-shadow and a transition	none

Description Pedro Paulo 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!

Comment 1 Radar WebKit Bug Importer 2021-12-30 07:23:20 PST

<rdar://problem/87013865>

Comment 2 Simon Fraser (smfr) 2022-01-04 10:08:06 PST

Thanks for the report, I can reproduce. Looks bad!

Comment 3 Simon Fraser (smfr) 2022-03-03 21:29:32 PST


*** This bug has been marked as a duplicate of bug 207586 ***