Bug 220215 – macOS 11 Big Sur Regression: WebKit transform scaling of an image that is clipped appears choppy (non-fractional)

• Status: RESOLVED
• Resolution: MOVED
• Component: Layout and Rendering

[Jonathan Deutsch]

Created attachment 416873 [details]
Xcode reproduction project

This is a Big Sur regression.

Scaling an element with an image that is clipped (say by a parent with overflow:hidden) will not render properly on fractional numbers.  The result is that when animating this appears very choppy.

This affects mac applications using the WebKit framework, but not WKWebView or Safari.

I'm attaching a sample project and video demonstrating how bad this looks. The HTML code is:

<style>
#container {
	width: 540px;
	height: 540px;
	overflow: hidden;
}
#child {
	width: 540px;
	height: 540px;
	background-image: url('[e-mail]');
	background-repeat: no-repeat no-repeat;
}
</style>

<div id = "container">
	<div id="child"></div>
</div>
    
<script>
var scale = 1.2;
function heartbeat() {
	scale -= .0004;
	document.getElementById("child").style.transform = "scale(" + scale + ")";
}
window.setInterval(heartbeat, 17);
</script>

This was originally reported by a user of the HTML5 animation tool Tumult Hype: https://tumult.com/hype/

[Jonathan Deutsch]

Created attachment 416874 [details]
Video demonstrating the problem; see the first part of the first run for how choppy it is

[Radar WebKit Bug Importer]

<rdar://problem/72770761>

[Simon Fraser (smfr)]

I believe this is a behavior change in AppKit. It will be tracked via the given radar.