I have created a pdf viewer using react-pdf. When I display certain pdfs, the text is choppy and unreadable. I have tried zooming in and out of the document and it is choppy in different ways at different scales. Sometimes the text even looks okay at a certain scale after zooming out and then zooming back in.
(Sample at 1.5 scale)
(Sample at 1.6 scale)
At first, I thought it might be an issue with react-pdf, but I saw that react-pdf is basically a wrapper around PDF.js. I found that I can replicate the issue in the PDF.js demo page.
Unfortunately, I'm working with a pdf that contains identifying information, so I can't share the full pdf or full screenshot. I'll include as much as I can figure out to share.
What I have tried
My initial thought was that maybe the component was rendering small initially and then had issues scaling up. So I made the initial size really large, but that didn't fix it.
I made sure that standard fonts were included following the instructions on the react-pdf home page
I tried using pdf repair tools online to maybe fix the pdf itself. That didn't help.
I tried changing the renderMode to 'svg' as detailed in the Document api documentation. This was the most helpful fix, as it does render the text correctly, but it then makes it so the images on the pdf don't load.
Thanks for your help/suggestions.
If I can find a way to edit the pdf to not have sensitive information, I'll try to find a place to make it available for testing. I apologize that I cannot provide that at this time. I know it's difficult to give advice when you can't replicate it yourself. I'll work on that.
From a programming point of view there is only "Providing a standardFontDataUrl and disabling the font face" (see later), however it affects many pdf.js based code developers outputs, thus I consider as still "OnTopic"
This issue is still open in react-pdf, though I have seen it mentioned by other pdf.js users since mid year (MS or Chrome update ?) , so unsure if it is not a wider fail affecting Mozilla PDF.js code users.
https://github.com/wojtekmaj/react-pdf/issues/1010
https://github.com/wojtekmaj/react-pdf/issues/1025
There semes to be earlier reports back in Early March and then later suggestions to change win 10 drivers. However also reported by win 11 Pro users. PDF.js versions from 2.8.335 to 2.14.305, and it doesn't affect version 2.7.570. so partially down to updated versions ! But seen only in Chromium.
It is entirely possible that we started doing something that trips Chrome,
The symptoms seem to be hardware or settings orientated since it is reportedly seen on some identical groups of users but not affecting others.
toggling back and forth between single page and multi-page views the issue resolves. It also seems dependent on the resolution or appears on some machines and not others so it is a little tricky to repro.
I am not getting it personally, but a guy in my team get it.
Unclear which browsers are affected but looks like its a chromium / web kit rendering bug ?
Several browsers have been tested and only chrome faces this.
My colleague gets the same in Edge Version 101.0.1210.47 (Official build) (64-bit) and Brave (1.38.118 Chromium 101.0.4951.67) Will edit the issue
The suggested workaround is :-
Providing a standardFontDataUrl and disabling the font face fixes the issue.
if we disable Accelerated 2D canvas in chrome://flags then the preview appears nice and okay. But since this flag is on by default so user see the pixelated preview. Unless we ask them to turn off this flag.
Figured out that this only happens when hardware acceleration is enabled in your Chrome settings.
When its turned off the issue does not happen.
In address bar paste chrome://gpu or edge://gpu etc (its a long report of current onboard fixes) in my case (currently unconfirmed via reboot for my Edge) is showing Accelerated 2D canvas is unavailable: either disabled via blocklist or the command line. Disabled Features: 2d_canvas, thus I cannot see problems.
To change setting you can use
chrome://flags/#disable-accelerated-2d-canvas
but its a manual choice between options.
so on reboot I see
Graphics Feature Status
Canvas: Hardware accelerated
Canvas out-of-process rasterization: Disabled
but have little problem with the domo (except normal fuzzy text as pixels) so either Edge update or my hardware is not visibly affected or my default settings are reasonable.
This issue has been finally fixed in the latest version of react-pdf library. Check here: https://github.com/wojtekmaj/react-pdf/releases/tag/v6.2.2
I also faced the same error and I fixed it by setting render mode to canvas (earlier it was SVG) and scale value to more than 1. Try scale = 1.5
Related
Why and how does pdf scrolling cause brief blurs on revealed content? (Using Microsoft edge here)Video example
I can reproduce the issue in latest version of Edge. There's no known workarounds at the moment other than using an alternative PDF reader.
AFAIK, the same issue has been reported and the Edge Product Group is evaluating possible ways to improve user experience. I suggest that you can also provide feedback to Edge team by pressing Alt+Shift+I in Edge. Let's waiting for the improvement in Edge's future updates. Thanks for your understanding.
There is an issue with Safari (on desktop) where PDF previews intermittently fail. I've observed this with files around 2MB, but not those under 1MB.
It seemed like a race condition, potentially in the code that generates the signed link however I've since narrowed it down to a Safari bug.
The symptoms are:
Intermittently failing Byte Range requests
Duplicate Byte Range requests (may or may not be an issue)
The preview shows empty, which essentially means a large grey box with the usual actions within the pdf viewer for downloading etc.
The solution to this was to use iframe instead of embed.
This does not appear to be an easy bug to search the solution for, and I've not a clue why it is a problem in the first place, however there is a documented report over on https://github.com/pipwerks/PDFObject/issues/243 which is where I found the solution.
I've also written a short blog post about it: https://shanehudson.net/articles/2022/pdf-breaking-safari/
As detailed in this YouTrack issue https://youtrack.jetbrains.com/issue/PY-40008 Presentation Mode is basically a one-way ticket: you can check in but you just can't leave.
One of the "misses" of returning to "normal" mode is that only the Editor panel is displayed: the Explorer, Debugger, etc. are all invisible.
That's a hassle to rectify in real time when presenting to a group of people. When I am actually giving presentations that include code snippet walk-throughs going back and forth between modes is mandatory so then Presentation Mode is a non-starter.
But then what? I code at a small font to view lots of code at one time. This is incompatible with displaying code on a projector. Here are some attempted band-aids:
Hit Command-+ a few times to increase the font. This does work, but if I switch to another file then I have to repeat that process: the new file does not "inherit" the zoomed-in preference. Then if I switch back to the first file it too has forgotten the zoom. That is very annoying for me and the audience
Change the Editor|Font .
This is a potentially better solution: at least it does affect all files and is "sticky". However I do find that the optimal resolution often requires tweaking for a given audience due to differing viewer characteristics e.g. Zoom vs Hangouts. So then I end up going into that dialog more than once with a gaggle of folks watching/waiting. Also not ideal.
The behavior is identical across recent releases of both Intellij (Ultimate 2019.3.1) and Pycharm (Ultimate 2019.2.3).
Anyone have alternative/better approaches?
I setup several Color Scheme Font schemes for desktop/laptop/presentation with different font sizes. I then use Ctrl-~ to quickly switch between them. Doesn't solve all the issues you mentioned, though.
I took a separate approach to fix this actually. When your font size is messed up after exiting the presentation mode, you can do the following.
Go to Preferences and then Appearance. Find the font size of the presentation mode and set it to the default font size (in my case it was 13). Then click Apply and you are good to go. Set the font size to 20 (or any other bigger size) back again for presentation mode.
I splurged and bought one of those high definition 4K screens. More specifically, the Dell UltraSharp 4k UP3216Q 31.5", combined with a new PC running Windows 10.
When the computer occasionally reboots, it goes into a mode where when I load IntelliJ, it shows the following error message:
8:16 PM You may need to manually configure the HiDPI mode to prevent UI scaling issues. See the troubleshooting guide.
The interesting thing is that when it's running in this mode, I actually like the way IntelliJ looks. I like it because it's running in true sharp 4K mode, and at the same time, all the fonts are large enough to be legible, and not require a magnetic resonance microscope or a monocle to make out the letters.
However, other times, when the system boots up, I do not get that error, meaning everything is functioning normally, but in that case, all the fonts are so tiny as to be illegible. It literally hurts my eyes to look at it, and the only alternatives I have left at that point is to either drop down from 3840x2160 into 1920x1080, or to go into the settings, and start increasing the font sizes, which is annoying. Not to mention that if I drop down into 1920x1080 mode, then the quality of what I am looking at degrades, everything starts looking pixelated...
Is there anything that can be done to stabilize the situation on these new 4K screens so that IntelliJ looks normal?
Try this:
Help > Edit Custom VM Options:
-Dsun.java2d.uiScale.enabled=true
More information can be found here:
https://intellij-support.jetbrains.com/hc/en-us/articles/115001260010-Troubleshooting-IDE-scaling-DPI-issues-on-Windows
If that does not help create a ticket in the JetBrains issue tracker: https://youtrack.jetbrains.com/
They are usually very responsive.
Another possibility is that you have the Windows UI scaling value for the screen set to a non-integral value in display settings. This messed me up, I had the setting to 175%, while the default is 200%. Intellij (and many other applications) will not scale properly if that is set to a non-integral scaling value.
As soon as I switch this back to 200% Intellij scales perfectly.
I fix this problem after setted env variable IDEA_JDK_64 to jdk path in windows 10
Is there a way to customize the font size of Safari's Web Inspector? I found these links on the web and have tried them out but don't seem to work:
https://gist.github.com/vlazar/1549785
http://miekd.com/articles/adding-some-monospace-to-the-safari-web-inspector/
If there's no solution to this problem, I might switch back to Chrome, for they offer even just a zooming feature for their own Web Inspector. Safari's Web Inspector fonts are just too small for me and my eyes suffer because of that.
I'd be happy to hear about workarounds or solutions anyone might have.
At the time this question was asked, it was not easy to change the zoom level.
In recent versions of WebKit, It's now possible to zoom the Web Inspector interface using ⌘– and ⌘+. This should be available in all versions of Safari Technology Preview.
It is not possible to change the font face through the user interface, though alternate font faces are used in various localizations.
Although it is very old question, I want to share much simpler alternative.
Open web inspector
Open settings of web inspector
Go to 'General' tab
Here you will see 'Zoom' option. Change it to a value you feel comfortable and all the text including UI buttons are enlarged.
The articles you linked refer to an earlier version of Safari. For version 6, the CSS is in a different location, depending on your OS version.
For 10.7.x:
/System/Library/StagedFrameworks/Safari/WebInspector.framework/Versions/Current/Resources/Main.css
For 10.8.x:
/System/Library/PrivateFrameworks/WebInspector.framework/Versions/Current/Resources/Main.css
You will need to chmod the file to edit it (back it up first) and it is compressed so using a tool that can prettify CSS is a good idea (I used WebStorm).
That's as far as I've got, I haven't identified the main content area font size class within the file yet. I'll let you know if I do (or maybe someone else will chime in).
I ended up doing a search/replace in the Main.css for 'font-size:11px' up to 14px.