Zoom PDF, text layer is not brought along

https://user-images.githubusercontent.com/1231659/137839092-5ba9a181-1143-4ab7-b23e-6df15e36ff89.mov

Before you start - checklist

• I have read documentation in README
• I have checked sample and test suites to see real life basic implementation
• I have checked if this question is not already asked

What are you trying to achieve? Please describe.

I’d like to implement a “Zoom in” / “Zoom out” button. I’d like the link and text layer to also be scaled.

      <Page
        loading={null}
        pageNumber={pageNumber}
        scale={data.scale}
        width={data.width}
        renderAnnotationLayer={true}
      />

where data.scale goes from 1 -> 2 and data.width is static.

Describe solutions you’ve tried

I’ve tried to set scale from 1 to 2 to implement zooming. This does zoom the PDF by 2x, but the text layer is offset.

I tried to change around scale/width to several different values to see if anything would click. No luck, which makes sense because react-pdf is multiplying width * scale, so I don’t need to do that myself.

I found a maybe relevant Github issue that’s open. However, it felt like maybe that’s referring to something other than this. I may have misunderstood the root cause it is trying to communicate, as the maintainers said it’s not reproducible.

Additional information

I’ve attached a video of my attempt. The console is printing console.log(data.scale, data.width) on every Page render.

Environment

• Browser (if applicable) [e.g. Chrome 57, Firefox 59]: Chrome 94.0.4606.81
• React-PDF version [e.g. 3.0.4]: 5.4.2
• React version [e.g. 16.3.0]: 17.0.2

[sb8244]

Hm okay, that’s where I think that maybe this is a bug (although most likely is me doing something wrong and not realizing it). I am not using custom CSS and they are not aligned. I will look at isolating it in a reproduction app to see what’s going on.

[wojtekmaj]

Pick either scale or width, not both.

No better way to explain than using code:

https://github.com/wojtekmaj/react-pdf/blob/e88e5c2a57d83b63d8340e6e30c32b7ccdbecc83/src/Page.jsx#L193-L207