Bug 256260 – REGRESSION (Safari 16): Canvas will intermittently come up blurry and remain so

• Status: RESOLVED
• Resolution: FIXED
• Component: Canvas

[Graham Murray]

Even provided correct CSS size vs back buffer size for the current window.devicePixelRatio, the canvas will sometimes be blurry on some page refreshes and remain so even when repainted and/or resized.

See: https://www.infragistics.com/webcomponents-demos/charts/category-chart/line-chart-multiple-sources

Repeatedly refresh the page and notice how sometimes the text will be blurry, and sometimes the text will be crisp. Reproduced against 16.4.1 on MacOS Monterey and various iOS devices running versions of Safari 16. I was unable to reproduce this on anything running Safari 15. The text would always be crisp. Inspecting the chart, we are using the appropriate back buffer size and css size regardless as to whether it looks crisp or blurry. It just randomly works correctly or incorrectly as you refresh it. I've tried to inject a time delay before the canvases in case it has something to do with the timing of the page initialization, but this does not seem to be the case.

Note, something that may be different about this scenario compared to more simple scenarios is that there are multiple canvases of a similar size being created in concert and positioned layered upon one another.

[Alexey Proskuryakov]

FWIW, I'm finding it to always be blurry with Safari 16.5 beta. Doesn't reproduce in Chrome.

[Radar WebKit Bug Importer]

<rdar://problem/108866016>

[Graham Murray]

@Alexey,

The specific repro I sent here triggers the blurriness more often than others. But it will sporadically come up crisp.

I've seen other scenarios where there are multiple components using canvases configured identically and some of them will come up blurry and some of them will come up crisp on the same refresh.

I'm wondering if the likelihood of triggering the issue may have to do with the size of the allocated surface? But this is just guesswork.

[Said Abou-Hallawa]

In the page https://www.infragistics.com/webcomponents-demos/charts/category-chart/line-chart-multiple-sources, there are three canvases stacked on top of each other. On 2x display, this markup can be seen in WebInspector:

<canvas style="position: absolute; top: 0px; left: 0px; width: 2163px; height: 1183px;" width="4326" height="2366"></canvas>
<canvas style="position: absolute; top: 0px; left: 0px; width: 2163px; height: 1183px;" width="4326" height="2366"></canvas>
<canvas style="position: absolute; top: 0px; left: 0px; touch-action: none; -webkit-user-select: none; width: 2163px; height: 1183px; outline: 0px;" width="4326" height="2366" tabindex="0"></canvas>

The css width and height are half the width and height attributes values.

On 1x display, this is the markup of these canvases:

<canvas style="position: absolute; top: 0px; left: 0px; width: 2163px; height: 1183px;" width="2163" height="1183"></canvas>
<canvas style="position: absolute; top: 0px; left: 0px; width: 2163px; height: 1183px;" width="2163" height="1183"></canvas>
<canvas style="position: absolute; top: 0px; left: 0px; touch-action: none; -webkit-user-select: none; width: 2163px; height: 1183px; outline: 0px;" width="2163" height="1183" tabindex="0"></canvas>

So the css width and height match the width and height attributes values. On 1x display the bug can't be reproduced.

I think somehow also the bug is related to the aspect ratio of the canvas. If the aspect ratio is bigger than 2, it does not happen

For example this size does not repro the bug:

<canvas style="position: absolute; top: 0px; left: 0px; width: 2288px; height: 169px;" width="4576" height="338"></canvas>

But this size does repro the bug:

<canvas style="position: absolute; top: 0px; left: 0px; width: 558px; height: 1182px;" width="1116" height="2364"></canvas>

[Matt Woodrow]

Pull request: https://github.com/WebKit/WebKit/pull/14464

[EWS]

Committed 264699@main (282f60810467): <https://commits.webkit.org/264699@main>

Reviewed commits have been landed. Closing PR #14464 and removing active labels.