Bug 267986 – Canvas with relative width not re-drawn correctly on parent resize

• Status: NEW
• Component: Canvas

Created attachment 469524 [details]
index.html

When a canvas had `width: 100%` and the parent gets resized, the canvas gets resized accordingly. However, WebKit only redraws part of the resized canvas contents, leaving the rest with the old size.

This bug affects all platforms and is easily noticeable on iPhone/iPad by using "pinch to zoom" with the popular PDF viewer [pdf.js](https://mozilla.github.io/pdf.js/): you can try it at https://mozilla.github.io/pdf.js/web/viewer.html. Past some zoom size (around 170% on iPad Air, and 200% on MacBook Air), the canvas where the PDF is rendered starts breaking into pieces.

I created a minimal reproduction that works on an iPad Air 2022. There are many hard-coded number that seem to be very much device-specific, so the same reproduction doesn't show the bug on a MacBook Air (not even if I use Safari's Responsive Design Mode to emulate the iPad display size).

I'm attaching the HTML file that shows the bug. I don't seem to be able to attach more than one file -- I'll post screenshots in a comment.

Created attachment 469525 [details]
PDF.js zoom tearing on Safari on desktop

Created attachment 469526 [details]
Reproduction screenshot before setTimeout triggers

Created attachment 469527 [details]
Reproduction screenshot after resizing the canvas parent

Created attachment 469528 [details]
Reproduction screenshot after resizing the canvas parent, with initial width of 1024px

I also noticed that if the initial width of the canvas container is slightly larger (starting fro 1024px, rather than 1000px) the canvas is still re-rendered incorrectly but in a different way: only the new area is redrawn, and the original one is left untouched.

Oh, and I also noticed that setting an explicit width on the canvas rather than a relative one fixes the rendering bug. Even just `width: inherit` is enough to get the canvas properly drawn, which is a good workaround for when trying to use `width: 100%`.

[Radar WebKit Bug Importer]

<rdar://problem/121996660>