Retina Display support

it seems that the resizeSensor hooks give density independent pixels… when ideally we’d rather have a canvas that displays at 840px instead of 420px on a 2x pixel ration phone.

This would help with clarity on 2x displays and pinch to zoom.

The current work around is to set the width: 200% and then transform: scale(0.5), with the container having margin-bottom: -100%

[zjjjjjjjjjjd]

why close this issue ?This problem occurred in 4.0.8

[FossPrime]

@dcean @FranckFreiburger this is an issue relating to differences in vueport sizing vs canvas sizing. You can get the problems to appear even at 125% zoom on desktop. Sidenote, 1.2 worked a lot better with my css hack/page flip throttling.

Problem #1 Page 1 doesn’t load (Rendering cancelled exception): pages don’t load reliably, particularly page 1. If page 2 manages to load, it’s usually smooth sailing from there.

How to reproduce: It happens 100% of the time on the android emulator with a nexus 5 Api 26. Setting page zoom on chrome to 500% on a mac makes it happen reliably for me.

RenderingCancelledException {message: "Rendering cancelled, page 1", type: "canvas"}
message:
"Rendering cancelled, page 1"
type:
"canvas"
__proto__:
Error at RenderingCancelledException (webpack-internal:///209:1907:43) at Object.eval (webpack-internal:///209:1911:2) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object.defineProperty.value (webpack-internal:///209:12574:18) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object._typeof (webpack-internal:///209:7422:26) at __w_pdfjs_require__ (webpack-internal:///209:52:30) at Object.defineProperty.value (webpack-internal:///209:95:18) at eval (webpack-internal:///209:98:10) at webpackUniversalModuleDefinition (webpack-internal:///209:25:20)
name:
"RenderingCancelledException"
stack:
"RenderingCancelledException↵    at RenderingCancelledException (webpack-internal:///209:1907:43)↵    at Object.eval (webpack-internal:///209:1911:2)↵    at __w_pdfjs_require__ (webpack-internal:///209:52:30)↵ 

Problem #2 subsequent pages don’t load (Cannot use the same canvas during multiple render): Looks like a race condition, a big pdf seems to exacerbate it.

How to reproduce: I managed to make it show up more reliably on desktop by flipping pages as early as possible. It happens 100% of the time on the android emulator with a nexus 5 Api 26. This reminds me of the problem with flipping pages too quickly.

Error: Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.
    at InternalRenderTask_initializeGraphics [as initializeGraphics] (pdf.js?013a:4586)
    at eval (pdf.js?013a:3592)
    at <anonymous>

Problem #3: Pages shrink when viewport is zoomed or using HiDPI/Retina

How to reproduce: zoom in on the page and reload in desktop. Happens 100% on N5 emulator, which has a pixel ratio of 3, some devices have 4, some have half ratios such as 1.5.

This is with default styles (width 100%), it normally fills the width if not zoomed in.