Character display issue on Chrome/Edge but not Firefox

Bug Reports
1

We are displaying a PDF but we have character/font issue on Chrom/Edge but not Firefox.

Version used :

"@pdftron/pdfjs-express-viewer": "^8.3.0",
"react": "^17.0.2",

See screenshots:
Chrome
image
Firefox
image

Do you have any clue on that?

3

Hello jkeruzec,

  1. Does this happen on every file?
  2. Does this happen on a specific file? (if so please link it here, or if it cant be published publicly I can send my email)
  3. Can you try updating to the latest version to see if the issue persists?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

4

Hi Tyler,

Thank you for your support,

I’ve tried:

  1. I think yes
  2. I can send you a file but it’s for private use only
  3. I’ve just updated to the latest version and error is still the same only Firefox works well

File is working well with built-in PDF viewer in Chrome

I’ve made a subset of the non working pdf
YINTR22242_Computing_and_AI_for_Automotive_2022_Report.pdf (322.8 KB)

image

Thanks,
Julien.

5

Hello Julien,

I loaded the file provided into the latest version with Chrome and I am unable to see this issue:

image
image813×351 49.5 KB

Do you have any custom code for loading?
What operating system are you using?
What Chrome/Edge version are you using?

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

6

I’ve simplified my code at the extreme.
Windows 11 but also doesn’t work also in windows 10
Edge version : Microsoft Edge
Version 102.0.1245.39 (Version officielle) (64 bits)

image
image1170×134 4.91 KB

Very simple interface, no css at all except yours

image
image792×252 16.9 KB

Same code Firefox 101.0.1

image
image811×252 20 KB

Viewer code

import React, { useRef, useEffect, useState } from 'react';
import WebViewer from '@pdftron/pdfjs-express-viewer';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
import ListDocumentsByType from '../../components/ui/ListDocumentsByType';

import documentService from '../../services/catalog/DocumentServices';

const Viewer2Page = (props) => {

	const [documents, setDocuments] = useState([]);

	const viewer = useRef(null);

	const isProductId = Number.isInteger(props.productId);

	useEffect(() => {
		documentService.getDocumentsByProductId(props.productId, props.jwt).then(json => {
			setDocuments(json);
			
			const config = window.env[window.env.mode];
			const currentPdf = config.apiMainEndPoint + "/catalog/documents/file/filename/" + json.find(data =>
				data.documentTypeId === 2).filename + "?token=" + props.jwt;


			WebViewer(
				{
					initialDoc: currentPdf,
					licenseKey: props.licenceKey
				},
				viewer.current,
			).then((instance) => {
				// now you can access APIs through the WebViewer instance
				instance.UI.openElements(['thumbnailsPanel']);
			});
		}
		);


	}, [props]);

	return (
		<>
			{isProductId
				?
							<div className="webviewer" ref={viewer}></div>

				: <p>No product found</p>
			}
		</>
	);

};


export default Viewer2Page;
7

Hello jkeruzec,

We have found a Microsoft forum post explaining a very similar issue: Redirecting
The text chopping looks almost identical to the ones reported here.

We are looking into any workarounds, but to clarify Windows 11 but also doesn’t work also in windows 10 does this mean it happens both in Windows 10 and 11? Or just Windows 11.

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

8

We have the same issue with Windows 10 as well …
Tested on Opera, same trouble.

Only Firefox is the best on this, no issue with it !

9

Same issue here

image

with another Library using canvas
I think library is

I’ve updated Redirecting

10

Hello jkeruzec,

Thank you for posting on that MS forum page, it makes sense that Opera is also producing the same result since it is also Chromium based.

I found a potential workaround here: PDF rendering issues in Google Chrome on Windows 10 : Papers Support

Let me know if this works for you!

Best regards,
Tyler Gordon
Web Development Support Engineer
PDFTron

11

Yep workaround is working for me,
I’ve updated to the latest windows, latest chrome, latest graphic driver but still not working…

I hope this will be fixed by graphic card driver/chromium engine soon !!

Thanks for the support !