Blurry PDFs Compared to Chrome

Steps to reproduce

  • Add a high-resolution PDF to vault
  • Open in Obsidian
  • Open in Chrome

Did you follow the troubleshooting guide? [Y/N]

Y

Expected result

PDF looks the same in both Obsidian and Chrome

Actual result

PDF is blurrier in Obsidian

Environment

SYSTEM INFO:
Obsidian version: v1.4.5
Installer version: v1.4.5
Operating system: Darwin Kernel Version 22.6.0: Wed Jul 5 22:22:52 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T8103 22.6.0
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

I would like to add that the problem is even worse on mobile (iPadOS 16.6)

Possibly related: Blurry pdf preview on Linux ( Fedora )

I get blurry PDFs on windows 11, and had this problem since the launch of the new pdf viewer, and it has survived multiple reinstalls of obsidian and different computers.

I’ve reproduced the problem with a completely fresh obsidian vault, and added debug info as well. This is related to the following bug: Blurry pdf preview on Linux ( Fedora )

Below is a screenshot of the issue, comparing two pdfs side by side, left side using pdfjs directly and right side the viewer inside the obsidian vault. The left hand side looks crisp ‘in-person’, but it’s just that the compression from the screenshotting itself is creating small artifacts, so ignore that.

The left hand side is using pdf.js directly from Mozilla to view the PDF, link to viewer used here: PDF.js viewer

Notice the blurriness is especially visible on small details and equations, and it becomes quite annoying to read text in obsidian due to this.

I’ve noticed that if you nudge the size / aspect of the window in obsidian, sometimes the preview renders the pdf more clearly. I suspect there’s some aspect ratios which get resized better than others. Using pdf.js directly from the link does not exhibit this behavior, it just rescales correctly.

Debug info

*(Notice, it says windows 10, I don’t know why it does that…)
SYSTEM INFO:
Obsidian version: v1.4.12
Installer version: v1.4.5
Operating system: Windows 10 Pro 10.0.22621
Login status: not logged in
Insider build toggle: off
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

Hey, as I was curious if I could replace the bundled pdf.js viewer with my own, and I needed to familiarize myself with pdf.js and obsidian plugin dev anyway for other things, I managed to get a proof of concept up and running using the standard latest npm version of pdf.js inside obsidian.

The blurriness can be completely removed by changing a parameter given to the pdf object from PDFJS.getDocument. When calling getViewport in pdf.js, this can be adjusted.
I.e. const viewport = pdfPage.getViewport({ scale: 4.0 }); and rendering the pdf via an attached div on the current page.

Everything is completely clear to me now. Given I know obsidian has some more stuff on top of it, so it might not be so simple, but I will further explore this option later and see if I can bundle it as a quickfix via a plugin at some point, unless of course they fix it first :stuck_out_tongue:

Otherwise it might be that this scaling factor is not being set high enough, when the layout logic and similar is getting called natively in obsidian. But it might be other issues, that I am not simply aware of, since I am new to obsidian plugin dev etc.

Hey, i have same Problems on Win 11. Were you able to make a Plugin?

Or could you explain, how you did it? Because in obsidian i dont find any pdf.js file which i could edit. Could you explain which file we hafve to edit and what we have to edit ?

Or please if you already did it, could you make a plugin, if this is not to much work ?

I would like to decide by myself, what scaling i want. Hate pdf viewer, who think no one see’s it, when you scale down.