Bug 287719 – Overflow scrolling in a scaled element results in blurry (interpolated) rendering of elements

• Status: RESOLVED
• Resolution: DUPLICATE
• Component: Compositing

[Jonathan Deutsch]

Created attachment 474236 [details]
Repro screenshot

If a parent element uses a transform:scale() and a child element has a scrollbar, everything inside the parent will render as interpolated/blurry.  Please see the following code:

```
<div style="position: absolute; transform: scaleX(4) scaleY(4);">

	<svg width="40" height="60" xmlns="http://www.w3.org/2000/svg" style = "position: absolute; top: 0px; left: 0px;">
	  <rect width="40" height="60" stroke="blue" fill="none" />
	</svg>

	<div id = "textrect" style="position: absolute; overflow: scroll; height: 100px; top:70px;">
		text<br>
		text<br>
		text<br>
		text<br>
		text<br>  <!-- remove this line and it renders sharply -->
	</div>

</div>

```

See screenshot. Both the SVG and the text rectangle themselves as blurry. If you remove one line such that a scrollbar does not appear (or change the overflow to hidden), it will re-render as scaled crisp.

I do not know if this is a recent regression, first noticed on:
Safari Technology Preview, Release 213 (Safari 18.2, WebKit 20621.1.11.111.1)

It also happens on the shipping Safari Version 18.3 (20620.2.4.11.5).

This *does not* affect Chrome or Firefox.

[Simon Fraser (smfr)]

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