search

BetterTyped / react-zoom-pan-pinch

🖼 React library to support easy zoom, pan, pinch on various html dom elements like <img> and <div>
MIT License
1.47k stars 268 forks source link

Laggy when zooming in big images #440

Open montasellx opened 9 months ago

montasellx commented 9 months ago

Describe the bug A clear and concise description of what the bug is. The problem i have been encountering is the following, when i zoom into rather large images (lice construction plans) the navigation of the image gets laggy even if dezooming.

To Reproduce Steps to reproduce the behavior: Add a TransformWrapper with a TransformComponent load a big image 8000KB for example and zoom in as much as you can

Expected behavior The image is zoomed and the navigation continues to be fluid

Desktop (please complete the following information):

mariansimecek commented 6 months ago

Same problem here.

mariansimecek commented 6 months ago

@montasellx I did some digging and found that the problem isn't with this library but with the browser. When you try debugging it, you find that the bottleneck is GPU rendering.

You can improve performance in various ways:

  1. Add the will-change: transform CSS style to contentStyle. This tells the browser to optimize transforming, but in my case, it makes the image blurry.
  2. Use getMatrixTransformStyles as customTransform. It uses matrix3d instead of translate, and it seems to be more performant. See customTransform prop for more details.
  3. Resize images. I found that images up to 8192px width are okay.

I use this library to show construction plans too. I resolved this problem by combining points 2 and 3.

I hope this helps.

royairb commented 1 month ago

happens to me as well. this is really frustrating as we're dealing with a large images (~5000*5000) and we have to keep them sharp (unfortunately will-change: transform is not a proper solution for us )