Laggy when zooming in big images

[montasellx]

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]

Same problem here.

[mariansimecek]

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