Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Workaround WebKit canvas rendering bug when zooming PDFs

Browse Source 
WebKit has a bug when rendering canvases that have their width defined as
relative to their container, and their parent is resized. This causes a
"tearing" effect when zooming in PDFs past a certain threshold, which
is device-dependent but tends to be between 120% and 200%.

The DOM structure around the canvas is as follows:
  div.pdfViewer [ --scale-factor: ...; ]
    > div.page [ width: round(var(--scale-factor) * ..., 1px); ]
      > div.canvasWrapper
        > canvas

Setting `width: inherit` on the div.canvasWrapper and on the canvas is
equivalent to explicitly specifying the same `width` property in pixels
as in div.page, thus making Safari properly redraw the canvas on resize.

See https://bugs.webkit.org/show_bug.cgi?id=267986 for more details
on the WebKit bug.

Fixes #16155, fixes #16329, fixes #17459
This commit is contained in:
Nicolò Ribaudo 2024-01-24 10:36:38 +01:00
parent ae62787080
commit 253621fc5d
No known key found for this signature in database
GPG Key ID: AAFDA9101C58F338
1 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
web/pdf_viewer.css
View File

@ -71,7 +71,9 @@
.pdfViewer .canvasWrapper {
overflow: hidden;
width: 100%;
/* See `width: inherit` comment in `.pdfViewer .page canvas[zooming]` for the reason
* we use `inherit` and not `100%`. */
width: inherit;
height: 100%;
z-index: 1;
}
@ -166,7 +168,25 @@
}
.pdfViewer .page canvas[zooming] {
width: 100%;
/* WebKit has a bug when rendering canvases that have their width defined as
* relative to their container, and their parent is resized. This causes a
* "tearing" effect when zooming in PDFs past a certain threshold, which
* is devide-dependent but tends to be between 120% and 200%.
*
* The DOM structure around the canvas is as follows:
* div.pdfViewer [ --scale-factor: ...; ]
* > div.page [ width: round(var(--scale-factor) * ..., 1px); ]
* > div.canvasWrapper
* > canvas
*
* Setting `width: inherit` on the div.canvasWrapper and on the canvas is
* equivalent to explicitly specifying the same `width` property in pixels
* as in div.page, thus making Safari properly redraw the canvas on resize.
*
* See https://bugs.webkit.org/show_bug.cgi?id=267986 for more details
* on the WebKit bug.
*/
width: inherit;
height: 100%;
}