Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rendering problem when zooming on Safari on iPhone 11 #16155

Closed
HalvorHaugan opened this issue Mar 14, 2023 · 2 comments · Fixed by #18019
Closed

Rendering problem when zooming on Safari on iPhone 11 #16155

HalvorHaugan opened this issue Mar 14, 2023 · 2 comments · Fixed by #18019

Comments

@HalvorHaugan
Copy link

Attach (recommended) or Link to PDF file here: https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf (seems to happen to any PDF)

Configuration:

  • Web browser and its version: Safari
  • Operating system and its version: iOS 16.2
  • PDF.js version: 3.5.61 (also reproduced on 3.4.120)
  • Is a browser extension: No

Steps to reproduce the problem:

  1. Open the PDF viewer in Safari on iOS
  2. Zoom in. The more you zoom, the worse it gets.

What is the expected behavior? (add screenshot)
PDF is rendered correctly when zooming.
expected

What went wrong? (add screenshot)
The PDF is rendered incorrectly when zooming.
wrong
@Snuffleupagus
Copy link
Collaborator

This unfortunately sounds like a browser- and/or platform-specific bug, since otherwise you'd expect it to be consistently broken everywhere; most likely this needs to be reported to Apple instead.

Please keep in mind that the built-in Firefox PDF Viewer is the primary development target here. (Historically it feels like Safari has often been the "worst" browser to attempt to support, and anecdotally it seems that later Safari versions have a fair share of trouble with the PDF.js library when Firefox/Chrome works fine.)

@Snuffleupagus Snuffleupagus closed this as not planned Won't fix, can't repro, duplicate, stale Mar 14, 2023
@HalvorHaugan
Copy link
Author

Ok, but it works fine in PDF.js 2.5.157.

@Snuffleupagus Snuffleupagus mentioned this issue Apr 20, 2023
Closed
nicolo-ribaudo added a commit to nicolo-ribaudo/pdf.js that referenced this issue Jan 24, 2024
@nicolo-ribaudo
Workaround WebKit canvas rendering bug when zooming PDFs
a2dda45 
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 nicolo-ribaudo mentioned this issue Jan 24, 2024
Closed
nicolo-ribaudo added a commit to nicolo-ribaudo/pdf.js that referenced this issue Jan 24, 2024
@nicolo-ribaudo
Workaround WebKit canvas rendering bug when zooming PDFs
a31f5f4 
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
@nicolo-ribaudo
Workaround WebKit canvas rendering bug when zooming PDFs
253621f 
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
@Snuffleupagus Snuffleupagus mentioned this issue Feb 22, 2024
Closed
@Aditi-1400 Aditi-1400 mentioned this issue Apr 29, 2024
Merged
@Snuffleupagus Snuffleupagus mentioned this issue Sep 10, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@Snuffleupagus @HalvorHaugan