Blocky/tiling glitch when using pinch-to-zoom in the default viewer (viewer.html)
#16329
Comments
|
Duplicate of #16155 |
nicolo-ribaudo
added a commit
to nicolo-ribaudo/pdf.js
that referenced
this issue
Jan 24, 2024
WebKit has a rendering bug when rendering canvas that have their width
relative to their parent, 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.
Fixes mozilla#16155, fixes mozilla#16329, fixes mozilla#17459
nicolo-ribaudo
added a commit
to nicolo-ribaudo/pdf.js
that referenced
this issue
Jan 24, 2024
WebKit has a rendering bug when rendering canvas that have their width
relative to their parent, 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 mozilla#16155, fixes mozilla#16329, fixes mozilla#17459
nicolo-ribaudo
added a commit
to nicolo-ribaudo/pdf.js
that referenced
this issue
Jan 24, 2024
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 mozilla#16155, fixes mozilla#16329, fixes mozilla#17459
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Link to a viewer: https://mozilla.github.io/pdf.js/web/viewer.html
Configuration:
Steps to reproduce the problem:
What went wrong?
Blocky glitches appear (see screenshot).
(The screenshot shows a different PDF file, but the same problem occurs in the one linked above.)
The text was updated successfully, but these errors were encountered: