Ensure that the container div, on BaseViewer-instances, is absolutely positioned

The `getVisibleElements` helper function currently requires the viewerContainer to be absolutely positioned; possibly fixing this is tracked in issue 11626.

Without `position: absolute;` set, in the CSS, there's a number of things that won't work correctly such as e.g.
 - Determining which pages are currently visible, thus forcing all of them to render on load and increasing resource usage significantly; note https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#allthepages

 - Scrolling pages into view, by using the `BaseViewer.currentPageNumber` setter or similar.

Based on the number of opened issues over the years, the fact that `position: absolute;` is required has shown to be something that users can very easily overlook unless they follow e.g. the `simpleviewer` example to the letter.
Hence, to improve things until such a time that issue 11626 is fixed, we'll now refuse to initialize a `BaseViewer` instance unless the `container` has the required CSS set. (Forcibly setting `position: absolute;` on the viewerContainer element is bound to cause significantly more issues/confusion, hence the current approach of throwing an Error.)
This commit is contained in:
Jonas Jenwald 2020-09-09 15:07:38 +02:00
parent e51e9d1f33
commit c27dcf2b03

View File

@ -145,14 +145,21 @@ class BaseViewer {
this.viewer = options.viewer || options.container.firstElementChild;
if (
(typeof PDFJSDev === "undefined" ||
PDFJSDev.test("!PRODUCTION || GENERIC")) &&
!(
this.container instanceof HTMLDivElement &&
this.viewer instanceof HTMLDivElement
)
typeof PDFJSDev === "undefined" ||
PDFJSDev.test("!PRODUCTION || GENERIC")
) {
throw new Error("Invalid `container` and/or `viewer` option.");
if (
!(
this.container instanceof HTMLDivElement &&
this.viewer instanceof HTMLDivElement
)
) {
throw new Error("Invalid `container` and/or `viewer` option.");
}
if (getComputedStyle(this.container).position !== "absolute") {
throw new Error("The `container` must be absolutely positioned.");
}
}
this.eventBus = options.eventBus;
this.linkService = options.linkService || new SimpleLinkService();