BetterTyped/react-zoom-pan-pinch

Laggy when zooming in big images

montasellx opened this issue · 3 comments

montasellx commented

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):

  • OS: windows
  • Browser chrome (have tried on multiple browsers with same results)
  • Version 120.0.6099.71
mariansimecek commented

Same problem here.

mariansimecek commented

@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.

  • 👍2
royairb commented

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 )