PDF Rendering Gibberish in Browser - google-chrome

I built a PDF in Illustrator, and am linking to it from a web page. It looks fine in SumatraPDF and in the Windows preview pane, but the browser renders this (just so you know, this is not how I want it to look)
Is this because I have font embedded? The only thing that I want to have happen with this is for a couple links on it to be clickable; otherwise, I'd convert it all to outlines. Is there something I need to do here that I haven't done?
EDIT: Here's a weird update about this. The browser follows the link embedded in the pdf when I click it. So it has the right data, but the wrong presentation apparently.

I'm assuming you are/were using either the Dev or Canary channel of Chrome. There was an experiment running in both channels that was causing this, which has since been reverted in Canary but is still affecting Dev 59.0.3053.X. For the more technical; this experiment enabled the PDFium code to use Skia to render paths instead of Anti-Grain Geometry and caused this font gibberish.
Here is the link to the bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=705039
UPDATE: This was fixed in the Dev Channel with update 59.0.3071.X

Related

Why does Google Chrome only displays the first page a pdf file?

I'm facing a problem with Google Chrome. One of my PDF only shows the first page and the rest looks as following:
Example:
First page is displayed normaly.
It recognizes the amount of pages in the PDF.
If I download the PDF, it is completely fine and useable, I even can open it in Chrome and it works fine. The problem doesn't occur on Firefox or Safari.
I'm using Google Chrome Version 85.0.4183.83 (Official Build) (64-bit)
Thanks for your help.
I experienced the same issue (but with another website). After investigation, it appears that this has something to do with SameSite cookies.
You can fix it by setting this flag to Disabled then restart Chrome:
chrome://flags/#same-site-by-default-cookies
Update: Found an issue in the Chromium bug tracker related to this problem:
https://bugs.chromium.org/p/chromium/issues/detail?id=961617
This issue appears to be caused by a conflict between Chrome and Fast Web View pdf optimisation. To fix it you need to turn off the optimisation within your pdf program settings and save the file again (in Adobe products this is located Preferences>Documents>Save Settings - uncheck Save As optimizes for Fast Web View). Pdf files which don't include this optimisation render all pages correctly.

Issues on chrome showing an embedded PDF

I have the following code in a html document:
<p>PDF sample</p>
<object data="http://www.whateverdomain.com/whatever/~/media/sample.pdf" type="application/pdf"></object>
This is working in IE, Firefox but not in Chrome. Appears a grey box in the browser with no embedded pdf. When I check on "network" tab in chrome I'm receiving a HTTP 200 response but PDF is not shown.
I tried URL encode tilde "~" symbol replacing it by %7e but still its not working on Chrome.
I don't have the possibility of changing the url which is provided by an external service.
Do you have any clue on how to solve ?
You might wish to try and use a simple iframe. At the very least I am pretty sure that works for chrome, might not work for IE though. Another alternative is using the Google Docs viewer, with that you are sure to be cross browser compatible, although some pdf's might not render perfectly. The last option you have is using something like pdf.js to render the pdf's yourself inside the browser. Gives you a lot of control and ensures that even people running computers without a pdf viewer installed (or a native pdf viewer like chrome and firefox) will be able to view the file.

Displaying Emoji in Google Chrome

I have a Google Chrome Extension that supports chat. The chrome extension displays the messages sent to you in desktop notification. I have noticed that whenever I send an emoji from an iPhone, it correctly displays in the Desktop notification. But when I try to display the same emoji in the actual application (it's an iframe injected into the page), it appears as a square.
Seems like there's an open bug at https://code.google.com/p/chromium/issues/detail?id=62435.
I was wondering why it works correctly in Desktop Notification and not otherwise? Also, is there anything I can do to fix it?
I just implemented Emoji support in my extension using the open-source Twemoji library.
In the simplest form, it involves adding a .js file and calling a function on a DOM element to replace Unicode emoji with Twitter CDN provided images:
twemoji.parse(node);
See the repository readme for more options.
Chrome will now support emojis natively (only OSX). You can wait a few weeks until the stable version is released with this feature, or you can download the dev-version form here, that already contains this feature.
Btw, if you want to test if it works, you can use this page (works like a charm).
You can view emoji with a Chrome extension called Chromoji.
It works on Mac OS X, Windows and Linux as well.
Solved by adding Emojis - Emoji Keyboard extension to Chrome.
Additionally, I checked that the Chromoji - Emojis for Google Chrome extension also works.
1st Note: Emojis appear everywhere on the page except for inputs and textarea.
2nd Note: Any of these extensions additionally give us the ability to search for emojis along with the possibility of copying them.
I saw this problem could be solved by updating Internet Explorer to version 11 under Windows 7 x64 (several computers affected, all solved).
In my case, it was because I formatted the pc with pure, no-servicepacked Windows 7 x64. After SP1 on Windows 7 and IE11 have installed, all browsers started to show the emojis correctely. I used for test this site.
If the page shows squares all around the page, the error is not solved. If the page shows several kinds of symbols, than the error is eliminated.
Please tell us if this workaround was effective.

FireFox appears to not support IFrame Data URIs

When I try to load a PDF Data URI into an iframe (eg, src="data:application/pdf;base64,...") in FireFox (18.0.2 [current release], OSX) it instead opens a download window.
For an example, check out the website JSPDF.com
The same site works fine in Aurora (20.0a2)
Is this a known issue with Firefox? Is it not conforming to the spec...?
Aurora has a built-in PDF renderer that can render PDFs inline.
Current release as of yesterday does not have that; it first appears in Firefox 19, which is about to be released.
A browser without a PDF plug-in or built-in PDF renderer will simply offer to download or open in a helper app a PDF that's loaded in a window as you're doing, which is exactly what you see.
As far as the spec goes, both behaviors are compliant. Nothing says a browser needs to support inline rendering of PDF.
You need to modify the options :
To :
I had a very similar problem with Firefox, iframes and data URIs. I resolved it by checking that there was no spaces in the data type definition. Mine was text/html, so instead of writing this:
src="data: text/html, ..."
it had to go like this:
src="data:text/html,..."
I conclude that firefox didn't understand the content type with spaces, thus considering it was a downloadable file.
This might be caused when there is no adobe reader installed. I'm not sure though. As I can't test it here as I don't have a Mac with Firefox running.

.png images display in IE8 alone but not inside a page

It's been a while since I did serious web development. Now I meet a host of brand new problems I'm no longer familiar with..
I have some .png images for various icons in my web page. What I find is that whenever I edit these images, they stop working inside a page in IE8. That is, they (usually) display OK when I first open the page, then are replaced by the placeholder icon on refresh. Sometimes, some of the icons display and others, with the same src, don't.
My image tags are nothing fancy, typically:
<img src="images/misc/smallreport.png" alt="Report" />
When I right-click an icon in the page and select "properties", protocol, type, address and size are shown as "Not Available", and dimensions are incorrect (size of the placeholder, I bet).
If I open the images directly in IE (ie. not within the page), they work just fine.
I have used Paint.NET to edit the images, but have also tried saving them with Paint.
Right now, I am working right off the hard disk (ie. not through a web server). And, oh yes, none of this happens in Google Chrome.
What's going on here?
check the path to the file is correct - can we see the tag please.
Well, we learn something new every day..
I mentioned that I'm running this directly off the harddisk? Now, it turns out the html page (which I had gotten off a coworker) was blocked "to help protect my computer", as Windows does.
This is no big surprise, lots of files I'm working with originate on other computers, and I usually don't worry much about it (except with executables, which won't run until unblocked).
It seems, however, that when IE8 loads such a blocked HTML file, its security settings adjust somehow, and - well, I can only guess at the details, but as soon as I right-clicked the HTML file, selected Properties and clicked the "unblock" button, the problem went away.
Something similar happened to me once, I tried hard to find what was wrong, then I realized I was saving (from Photoshop) the file as PSD but with extension .png. Make sure you're not doing the same.
Also:
Clear temporary Internet files
Verify that the Show Pictures option has not been turned off
Make sure that the Toggle Images.exe Web accessory is not present and disabling images
Make sure that a third-party Internet security, firewall, or cookie-blocking program is not causing the problem
Enable the Auto-Select encoding option
Source
It might be that the website you have browse has a lack of support
for an IE browser. IE is a nightmare for all web developers & Web designers.
It might be the developer of that website didn't care for an IE display because
of IE issues. Perhaps IE is trying to create a web standard to increase their
sales and marketing strategy. That's why don't care the modern Web development standard.
Why Chrome or Firefox or Safari, it's a free anyway.