Zoom limit on iOS

[gongevangen]

Attach (recommended) or Link to PDF file here:
zoom test.pdf

Configuration:

• Web browser and its version: Safari 12
• Operating system and its version: ipadOS 13.1.2
• PDF.js version: 2.1.266
• Is a browser extension: no

Steps to reproduce the problem:

1. Open attached file in Safari on an iPad running ipadOS 13 in the pdfjs demo viewer https://mozilla.github.io/pdf.js/web/viewer.html
2. click zoom + button to zoom into 220%.
3. The file is no longer displayed instead all white is shown. If a Safari inspector is attached it will write "Canvas area exceeds the maximum limit (width * height > 16777216)." in the console.

What is the expected behavior? (add screenshot) : to be able to zoom more than 200%

What went wrong? (add screenshot): white is shown instead of the content of the file.

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension): https://mozilla.github.io/pdf.js/web/viewer.html

It seems that the zoom limit is different for different files. Is there a way to calculate what it is at runtime each file so I avoid showing white instead of the file without having to set a very low zoom limit on iOS devices?

[Snuffleupagus]

The file is no longer displayed instead all white is shown. If a Safari inspector is attached it will write "Canvas area exceeds the maximum limit (width * height > 16777216)." in the console.

That's quite strange, since the maximum canvas size should be limited to a much smaller value on mobile platforms; see

pdf.js/web/viewer_compatibility.js

Lines 23 to 29 in 16ae7c6

	// Limit canvas size to 5 mega-pixels on mobile.
	// Support: Android, iOS
	(function checkCanvasSizeLimitation() {
	if (isIOS || isAndroid) {
	compatibilityParams.maxCanvasPixels = 5242880;
	}
	})();

[gongevangen]

Then I guess I know what the problem is: Apple have made Safari on ipadOS 13 "a desktop class browser" which means that it reports EXACTLY the same navigator.userAgent string as Safari on MacOS reports => isIOS() returns false. According to https://stackoverflow.com/questions/57765958/how-to-detect-ipad-and-ipad-os-version-in-ios-13-and-up the only way currently to distinguish between Safari 13 on Mac and ipadOS is to test for navigator.maxTouchPoints > 1.

[Snuffleupagus]

Apple have made Safari on ipadOS 13 "a desktop class browser" which means that it reports EXACTLY the same navigator.userAgent string as Safari on MacOS reports => isIOS() returns false.

This seems kind of, well, unfortunate to me; but obviously that part of the problem is not something we can fix...

Anyway, can you please check if preview build in PR #11246 is enough to work-around this issue?

[gongevangen]

I can only agree.

The build at http://54.67.70.0:8877/65321f96da43bee/web/viewer.html works on my ipad pro running ipadOS 13.1.2.

When will this fix be available in a build of the npm library?

[Snuffleupagus]

When will this fix be available in a build of the npm library?

Considering that it's neither approved nor landed yet, that's probably anyone's guess at this point :-)
Furthermore, this really doesn't seem anywhere near serious enough to warrant a new release right away.

Given that the default viewer (purposely) isn't shipping via npm, I'd assume that you're using the viewer components in some way. In that case, note that the PDFViewer constructor already accepts a custom maxCanvasPixels value; see

pdf.js/web/base_viewer.js

Lines 33 to 66 in 16ae7c6

	/**
	* @typedef {Object} PDFViewerOptions
	* @property {HTMLDivElement} container - The container for the viewer element.
	* @property {HTMLDivElement} [viewer] - The viewer element.
	* @property {EventBus} eventBus - The application event bus.
	* @property {IPDFLinkService} linkService - The navigation/linking service.
	* @property {DownloadManager} [downloadManager] - The download manager
	* component.
	* @property {PDFFindController} [findController] - The find controller
	* component.
	* @property {PDFRenderingQueue} [renderingQueue] - The rendering queue object.
	* @property {boolean} [removePageBorders] - Removes the border shadow around
	* the pages. The default value is `false`.
	* @property {number} [textLayerMode] - Controls if the text layer used for
	* selection and searching is created, and if the improved text selection
	* behaviour is enabled. The constants from {TextLayerMode} should be used.
	* The default value is `TextLayerMode.ENABLE`.
	* @property {string} [imageResourcesPath] - Path for image resources, mainly
	* mainly for annotation icons. Include trailing slash.
	* @property {boolean} [renderInteractiveForms] - Enables rendering of
	* interactive form elements. The default is `false`.
	* @property {boolean} [enablePrintAutoRotate] - Enables automatic rotation of
	* pages whose orientation differ from the first page upon printing. The
	* default is `false`.
	* @property {string} renderer - 'canvas' or 'svg'. The default is 'canvas'.
	* @property {boolean} [enableWebGL] - Enables WebGL accelerated rendering for
	* some operations. The default value is `false`.
	* @property {boolean} [useOnlyCssZoom] - Enables CSS only zooming. The default
	* value is `false`.
	* @property {number} [maxCanvasPixels] - The maximum supported canvas size in
	* total pixels, i.e. width * height. Use -1 for no limit. The default value
	* is 4096 * 4096 (16 mega-pixels).
	* @property {IL10n} l10n - Localization service.
	*/

hence you can already "fix" this yourself, in your implementation, until such a time that the PR lands!

[timvandermeij]

The fix is now merged and will be in the next release, but it's not yet known when that is going to be made. For now it's best to set maxCanvasPixels yourself like in the comment above.

[seopei]

I am running into the same issue. I tried to change maxCanvasPixels to 5242880. If I change it to a very low number eg 1000 it does work, but but obviously you can not read anything :) I am using ng2-pdf-viewer (VadimDez/ng2-pdf-viewer#492)