maxCanvasPixels / onlyCssZoom is not working (iOS Canvas limitation)

[CONOVA24]

Link to PDF Viewer: REMOVED

Configuration Details:

• Web Browser: Safari (iOS)
• Operating System: iOS, iPhone 15 Pro Max
• PDF.js Version: 4.1.392 (pdfjs-dist)

Issue Reproduction Steps:

1. Open the provided link on an iOS device using Safari.
2. Zoom into the PDF until the display turns white.
3. The console displays the error message: "Canvas area exceeds the maximum limit (width * height > 16,777,216)."

Attempted Solution:
I attempted to enable onlyCssZoom by setting PDFViewerApplication.pdfViewer.maxCanvasPixels to 0. However, this approach resulted in an error, preventing the opening of most larger PDFs on iOS devices due to an increase in max canvas size. Adjusting maxCanvasPixels to 16,777,216 on iOS devices seemed to disable CSS Zoom and it still runs into the same error at some point.

Current Issue:
Upon zooming in, the viewer stops because it encounters the "Canvas area exceeds the maximum limit" error again, indicating the limitation setting is not functioning as expected.

Expected Behavior:
Given the canvas size limitation of 16,777,216 on iOS, the library should verify the expected canvas size against this limit and render the largest possible dimensions that do not exceed this threshold. Subsequent zooming should use CSS scaling to provide a viewable albeit blurred image, instead of displaying a blank screen. This behavior should apply whether PDFViewerApplication.pdfViewer.maxCanvasPixels is set to 0 or to 16,777,216.

[CONOVA24]

To add more context:
When opening the PDF with maxCanvasPixels set to 0, the generated canvas size is as follows:
[Log] (viewer.mjs, line 12788)
This configuration results in a total area of 17,458,200, which surpasses the iOS canvas limit of 16,777,216.

[CONOVA24]

@Snuffleupagus Hello Jonas, could you please give me some quick feedback on this? From my perspective, this seems to be a bug, or am I seeing it wrong? With the current configuration, these PDFs can't be opened with the editor at all when the limit is set to 0.

[Snuffleupagus]

Safari in general, and especially on iOS, has a lot of problems not found in other browsers; hence why it's only listed as "mostly" supported in the FAQ: https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support

[CONOVA24]

@Snuffleupagus, thanks for your response. Maybe this would help a little bit?
I've implemented a canvas limit in the drawing function as follows:

if (this.maxCanvasPixels === 0) {
const invScale = 1 / this.scale;
outputScale.sx *= invScale;
outputScale.sy *= invScale;
// CUSTOM CANVAS LIMIT
const maxCanvasPixels = maxCanvasSize();
const pixelsInViewport = width * height;
const maxScale = Math.sqrt(maxCanvasPixels / pixelsInViewport);
if (outputScale.sx > maxScale || outputScale.sy > maxScale) {
outputScale.sx = maxScale;
outputScale.sy = maxScale;
}
this.#hasRestrictedScaling = true;
}

The maxCanvasSize() function returns a maximum of 16,777,216 pixels for iOS and 268,435,456 pixels for all other browsers. Further separation of these limits is possible, as discussed here, but the current settings suffice for my purposes.

Additionally, I propose a modification to the roundToDivide function to prevent exceeding the maximum canvas size:
function roundToDivide(x, div) {
const r = x % div;
return x - r;
}
With this change, the roundToDivide function will ensure that outputScale values do not result in a canvas size larger than the specified limit. Otherwise the function can return an outputScale value that leads to a canvas bigger than the given maxCanvasSize.