ui_utils getVisibleElement not calculating 'left' correctly. #10348
Comments
|
That line of code hasn't changed, in any meaningful way, for many years and any changes to it however minute could risk regressing the PDF viewer in Firefox. Hence a couple of quick questions:
|
Having tested this very quickly, the above change unfortunately seem to break the For example, with the sidebar open and using the "Odd Spread"-mode, try running |
|
Thanks for the guidance. I was able to reproduce the problem by changing <!-- simpleviewer-edited.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%;
}
.col-6 {
width: 50% !important;
float: left;
position: initial !important;
}
</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 class="col-6">
Hello World!
</div>
<div id="viewerContainer" class="col-6">
<div id="viewer" class="pdfViewer"></div>
</div>
<script src="simpleviewer.js"></script>
</body>
</html>The pdf I used was: https://cors-anywhere.herokuapp.com/https://www.ets.org/Media/Tests/GRE/pdf/gre_research_validity_data.pdf Does this mean this kind of styling is not supported? |
|
I solved this by using a relatively positioned parent to correct for the <!-- ... -->
<div class="col-6">
Hello World!
</div>
<div class="col-6" style="position:relative;">
<div id="viewerContainer">
<div id="viewer" class="pdfViewer"></div>
</div>
</div>
<!-- ... -->This makes the |
Occuring on
[email protected].Pages are not rendering due to a posible error in
ui_utils.getVisibleElement().Repro by @jgrant95 https://stackblitz.com/edit/ng2-pdf-viewer-qdfyem
To determine whether a page is visible,
ui_utils.jslooks for the left border of a page on screen:pdf.js/web/ui_utils.js
Line 473 in 2f4c7e0
and compares it to the right border of the containing scroll element:
pdf.js/web/ui_utils.js
Line 417 in 2f4c7e0
pdf.js/web/ui_utils.js
Line 493 in 2f4c7e0
However, the calculation of
leftdoes not take into accountscrollEl.offsetLeft, whilecurrentWidthdoes includeelement.offsetLeft. Subsequently,righttakes on a value less than what it should be.So, if
element.offsetLeftis higher thanscrollEl.clientWidth, the page will not render, even ifscrollEl.offsetLeftcompensates the position of the container to make the page visible.I believe the correct formula for
leftis:let left = scrollEl.scrollLeft + scrollEl.offsetLeftThe text was updated successfully, but these errors were encountered: