Character display issue on Chrome/Edge but not Firefox

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?

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

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.

Hello Julien,

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

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

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)

Very simple interface, no css at all except yours

Same code Firefox 101.0.1

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;

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

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 !