WebViewer Version: 11.8.0
Do you have an issue with a specific file(s)?
- no
Can you reproduce using one of our samples or online demos?
Yes, this one also just zooms to the center instead of the mouse location:
Are you using the WebViewer server?
- no
Does the issue only happen on certain browsers?
- tested on Chromium
- on Firefox the pdf viewer crashes (Apryse WebViewer Demo: JavaScript PDF Viewer Demo)
Is your issue related to a front-end framework?
- maybe, we are using vite + react
Is your issue related to annotations?
- no
Please give a brief summary of your issue:
Pinch-to-zoom and CTRL+ Mouse wheel zoom doesn’t follow mouse location
Please describe your issue and provide steps to reproduce it:
Basically when trying to zoom into a pdf it will only zoom to a certain location (for us its the right side), ignoring the mouse position.
We would expect that it zooms to the mouse position. This is working without a problem when you render the Webviewer as an IFrame (WebViewer.Iframe). We would want to avoid going this route though.
We are using Resizable from Shadcn (Resizable - shadcn/ui) to render the pdf, this causes it to only zoom to the right hand side of a pdf.
Moving it out of the Resizable will follow the mouse a bit, but will still be off. It seems like the mouse position is not correctly tracked.
Minimal reproducible example with our stack:
<div className="w-300 h-200">
<PDFViewer ... />
</div>
export const PDFViewer: FC<Props> = ({}) => {
const viewer = useRef<HTMLDivElement>(null)
const initializePDFViewer = useCallback(async () => {
if (!viewer.current) return
const instance = await WebViewer(
{
path: '/lib/webviewer',
css: '/lib/webviewer/pdfViewerStyles.css',
licenseKey: import.meta.env.VITE_WEBVIEWER_LICENSE_KEY,
fullAPI: true,
enableFilePicker: true,
preloadWorker: WebViewer.WorkerTypes.PDF,
enableOptimizedWorkers: true,
},
viewer.current
)
}, [])
return <div className="w-full h-full relative" ref={viewer} />
}
Happy to also provide a video/more information if needed.
Thanks!
