When a pdf loads and under some circumstances (screen size, resolution, zoom level), the letters display broken

Technical Support
1

Which product are you using?
PDF.js Express Viewer

PDF.js Express Version
8.7
Detailed description of issue
When a pdf loads and under some circumstances (screen size, resolution, zoom level), the letters display broken. For example in my laptop 1920x1080 with zoom level 85%.
broken_letters

Expected behaviour
The same pdf works normal from my PC
Capture

Does your issue happen with every document, or just one?
With every document but only on specific PC/laptop (screen size, resolution, zoom level)

Link to document
{Provide a link to the document in question if possible}

Code snippet
div id=“viewer” style=“width:100%;height:95vh;margin:0 auto”

WebViewer({
	path: "${contextPath}/lib",
	licenseKey: '....',
	initialDoc: "....",
    disabledElements: [
        'viewControlsButton',
        'selectToolButton',
        'fitButton',
        'freeHandToolGroupButton',
        'textToolGroupButton',
        'shapeToolGroupButton',
        'eraserToolButton',
        'signatureToolGroupButton',
        'freeTextToolButton',
        'stickyToolButton',
        'miscToolGroupButton',
        'toolsButton',
        'searchButton',
        'menuButton',
        'searchPanel',
        'viewControlsOverlay',
        'menuOverlay',
        'pageNavOverlay',
        'toolsOverlay',
        'searchOverlay',
        'annotationPopup',
        'annotationStylePopup',
        'toolStylePopup',
        'stylePopup',
        'textPopup',

        'annotationNoteConnectorLine',
        'signatureModal',
        'printModal',
        'loadingModal',
        'errorModal',
        'passwordModal',


        'stickyToolButton',
        'highlightToolButton',
        'freeHandToolButton',
        'freeTextToolButton',

        'leftPanel',
        'leftPanelButton',
    ],
}, document.getElementById('viewer'))
		.then(instance => {

            const docViewer = instance.Core.documentViewer;
            docViewer.addEventListener('documentLoaded', () => {
                console.log('document loaded');
                instance.UI.disableFeatures([instance.UI.Feature.TextSelection, instance.UI.Feature.Copy, instance.UI.Feature.Print]);
                instance.disableFeatures([instance.Feature.TextSelection, instance.Feature.Copy, instance.Feature.Print]);
            });

		});
2

Hi there,

Thank you for contacting pdf.js express forums,

It doesn’t seem like there’s anything wrong with your WebViewer instance, can you reproduce this issue in our demo site?

If not, can you please provide a sample pdf document to reproduce this issue?

Best regards,
Kevin Kim

3

The error has been resolved. The viewer is used within a liferay portlet.
The problem was that the import of webviewer.min.js was within the jsp and not in liferay-portlet.xml and header-javascript tag.