Textlayer misplaced on Google Chrome #14205

fsallin · 2021-10-28T14:09:02Z

Some PDFs taken from Elsevier journal (Science Direct) have their textlayer on their first page misplaced by an offset. It seems to occur on their first page and on Google Chrome only.
It might be tied to #14176

Attach (recommended) or Link to PDF file here:

KemkinEtAl_2016_Accretionary prisms of the Sikhote-Alin Orogenic Belt_ Composition- structure and significance for reconstruction of the geodynamic evolution of the eastern Asian margin.pdf

Configuration:

Web browser and its version: Chrome 95.0.4638.54 (Build officiel) (64 bits)
Operating system and its version: Windows 10 21H1
PDF.js version: pdfjs-dist v2.10.377 from npm
Is a browser extension: No

Steps to reproduce the problem:

npm install pdfjs-dist
Use the simpleviewer tutorial simpleviewer.html,
simpleviewer.js
Replace the example PDF with mine, replace path to pdf-dist.js files. Here are the 2 files modified for convenience.
simpleviewer.html :

<!DOCTYPE html>
<!--
Copyright 2014 Mozilla Foundation

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html dir="ltr" mozdisallowselectionprint>

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="google" content="notranslate">
 <title>PDF.js viewer using built components</title>

 <style>
   body {
     background-color: #808080;
     margin: 0;
     padding: 0;
   }

   #viewerContainer {
     overflow: auto;
     position: absolute;
     width: 100%;
     height: 100%;
   }

 </style>

 <link rel="stylesheet" href="./node_modules/pdfjs-dist/web/pdf_viewer.css">

 <script src="./node_modules/pdfjs-dist/build/pdf.js"></script>
 <script src="./node_modules/pdfjs-dist/web/pdf_viewer.js"></script>
</head>

<body tabindex="1">
 <div id="viewerContainer">
   <div id="viewer" class="pdfViewer"></div>
 </div>

 <script src="./simpleviewer.js"></script>
</body>

</html>

simpleviewer.js:

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

'use strict';

if (!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
  // eslint-disable-next-line no-alert
  alert('Please build the pdfjs-dist library using\n  `gulp dist-install`');
}
console.log(pdfjsLib);
// The workerSrc property shall be specified.
//
pdfjsLib.GlobalWorkerOptions.workerSrc = './node_modules/pdfjs-dist/build/pdf.worker.js';

// Some PDFs need external cmaps.
//
const CMAP_URL = './node_modules/pdfjs-dist/web/cmaps/';
const CMAP_PACKED = true;

const DEFAULT_URL =
  './KemkinEtAl_2016_Accretionary prisms of the Sikhote-Alin Orogenic Belt_ Composition- structure and significance for reconstruction of the geodynamic evolution of the eastern Asian margin.pdf';
// To test the AcroForm and/or scripting functionality, try e.g. this file:
// "../../test/pdfs/160F-2019.pdf"

const ENABLE_XFA = true;
const SEARCH_FOR = ''; // try "Mozilla";

const SANDBOX_BUNDLE_SRC = './node_modules/pdfjs-dist/build/pdf.sandbox.js';

const container = document.getElementById('viewerContainer');

const eventBus = new pdfjsViewer.EventBus();

// (Optionally) enable hyperlinks within PDF files.
const pdfLinkService = new pdfjsViewer.PDFLinkService({
  eventBus
});

// (Optionally) enable find controller.
const pdfFindController = new pdfjsViewer.PDFFindController({
  eventBus,
  linkService: pdfLinkService
});

// (Optionally) enable scripting support.
const pdfScriptingManager = new pdfjsViewer.PDFScriptingManager({
  eventBus,
  sandboxBundleSrc: SANDBOX_BUNDLE_SRC
});

const pdfViewer = new pdfjsViewer.PDFViewer({
  container,
  eventBus,
  linkService: pdfLinkService,
  findController: pdfFindController,
  scriptingManager: pdfScriptingManager,
  enableScripting: true // Only necessary in PDF.js version 2.10.377 and below.
});
pdfLinkService.setViewer(pdfViewer);
pdfScriptingManager.setViewer(pdfViewer);

eventBus.on('pagesinit', function () {
  // We can use pdfViewer now, e.g. let's change default scale.
  pdfViewer.currentScaleValue = 'page-width';

  // We can try searching for things.
  if (SEARCH_FOR) {
    if (!pdfFindController._onFind) {
      pdfFindController.executeCommand('find', { query: SEARCH_FOR });
    } else {
      eventBus.dispatch('find', { type: '', query: SEARCH_FOR });
    }
  }
});

// Loading document.
const loadingTask = pdfjsLib.getDocument({
  url: DEFAULT_URL,
  cMapUrl: CMAP_URL,
  cMapPacked: CMAP_PACKED,
  enableXfa: ENABLE_XFA
});
(async function () {
  const pdfDocument = await loadingTask.promise;
  // Document loaded, specifying document for the viewer and
  // the (optional) linkService.
  pdfViewer.setDocument(pdfDocument);

  pdfLinkService.setDocument(pdfDocument, null);
})();

What is the expected behavior?

In Firefox, the textlayer is correctly placed

What went wrong?

In Google Chrome, the textlayer is misplaced by an offset

Snuffleupagus · 2021-10-28T14:20:37Z

It might be tied to #14176

I really don't think so, since that one first of all isn't Google Chrome specific and secondly it's only a very minor textLayer misplacement there.

My best guess would be that this is a Google Chrome specific regression from PR #13171.

fsallin · 2021-10-28T15:12:36Z

In this PDF, the textlayer is misplaced on each page. It is too big to be included here, though.
It seems it only appears in pages containing an annotation layer.

Snuffleupagus · 2021-10-28T15:18:10Z

It seems it only appears in pages containing an annotation layer.

No, as mentioned in #14205 (comment) it's related to marked content.

fsallin · 2021-10-29T07:30:15Z

I downgraded pdfjs-dist to v2.8.335 which is the release before PR #13171 and the text layer is placed correctly now.
I will use this version in my project then.

Snuffleupagus · 2021-10-29T07:59:59Z

I downgraded pdfjs-dist to v2.8.335 which is the release before PR #13171 and the text layer is placed correctly now.
I will use this version in my project then.

That's really not advisable, since that version is both old and unsupported.

Snuffleupagus added chrome-specific text-selection labels Oct 28, 2021

Snuffleupagus added the regression label Oct 28, 2021

Snuffleupagus mentioned this issue Oct 29, 2021

[Google Chrome] Ensure that markedContent spans are placed in the top-left corner (issue 14205) #14209

Merged

brendandahl closed this as completed in #14209 Nov 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Textlayer misplaced on Google Chrome #14205

Textlayer misplaced on Google Chrome #14205

fsallin commented Oct 28, 2021

Snuffleupagus commented Oct 28, 2021 •

edited

fsallin commented Oct 28, 2021

Snuffleupagus commented Oct 28, 2021

fsallin commented Oct 29, 2021

Snuffleupagus commented Oct 29, 2021

Textlayer misplaced on Google Chrome #14205

Textlayer misplaced on Google Chrome #14205

Comments

fsallin commented Oct 28, 2021

Attach (recommended) or Link to PDF file here:

Configuration:

Steps to reproduce the problem:

What is the expected behavior?

What went wrong?

Snuffleupagus commented Oct 28, 2021 • edited

fsallin commented Oct 28, 2021

Snuffleupagus commented Oct 28, 2021

fsallin commented Oct 29, 2021

Snuffleupagus commented Oct 29, 2021

Snuffleupagus commented Oct 28, 2021 •

edited