The viewer setup on the React/vite app. Working fine with most of the files. I tried to open this file (Google Drive) in my app and saw that when scrolling it freezes in sometimes for couple a seconds. It’s blocks the UI and bad for the UX.
The bug is reproduced on demo of PDF.js Express, please try to open the file that I attached above.
I updated the viewer to 8.7.5 but it’s not resolved this issue.
Reproduced on:
- macOS
- chromium based browsers in incognito mode (Arc, Chromium, Opera)
- PDF.js Expresss version 8.7.4
- react 18.2.0
- vite 5.0.8
I tested this bug in the performance tab of Chrome dev tools and recognized that one of the functions named getImageData is executing too long.
It take about 17262ms to execute. Here is part of the code that causing the troubles:
function(e) {
for (var r$jscomp$0 = arguments.length, s = Array(1 < r$jscomp$0 ? r$jscomp$0 - 1 : 0), o = 1; o < r$jscomp$0; o++)
s[o - 1] = arguments[o];
r$jscomp$0 = function() {
p$jscomp$0 = [e].concat(s);
var r = e.getContext("2d").getImageData(0, 0, e.width, e.height).data;
l.set(r);
b("r", i$jscomp$0, e.width, e.height)
}
;
window.requestAnimationFrame ? window.requestAnimationFrame(r$jscomp$0) : setTimeout(r$jscomp$0, 0)
},
The code is quite complicated and I don’t understand what this function does.
I investigated this file which causing the problem and he has so many graphics and this can be the case of reezing.
What is the reason for this such a long function execution that blocks the entire UI? How to fix it? And there will be some patch fixes for this, if yes then when?
Please inform me if you need additional information.