I'm working on specific software to design with web technologies. I'm trying to improve the performance of my rendering engine. There is a look-a-like canvas made of a div that can be scaled and translated to simulate a 2D camera, This is the "canvas" where you can see what you are designing. In this canvas, there can be anything (any kind of HTML tags and arborescences).
How it works
I'm doing certain transformations on the "canvas" div when the user is trying to zoom/unzoom, scroll or pan the view. The canvas div transform is cached and then updated in a "requestAnimationFrame" to prevent useless "force reflows".
The problem
Everything kinda works well but the zoom process is still very consuming and laggy when you have a lot of elements in the canvas or many stylized elements because on each transform update of the canvas div, the browser needs to recalculate the visual and repaint every element in the canvas every animation frame requested (kinda every 16ms) and I want to enhance this performance.
What I'm trying to do
I recently tried to add the will-change: transform property to the canvas div during the zooming process. It enhanced the zoom process performance a lot because it stop the repainting of the element in the canvas while zooming and only repaint once when the user stop zooming in the canvas.
The problem with this actual solution
Now the problem is when I zoom out in the canvas. The will-change: transform property also is added when I zoom out but blocking the repaint of the canvas content on the zoom out leads to massive Flickr and glitchy effects on the zoom out.
Here is a video showing the Flickr on Zoom out. In this video, we can see that the green rectangle is correctly repainted when the zoom-in ends but on the zoom out there is a massive glitchy effect on all the canvas elements.
More informations
The canvas div has the CSS props: backface-visibility: hidden and transform-style: preserve-3d.
The transforms I apply to the canvas div (and also all the canvas elements) force hardware acceleration by using 3D transforms.
Thank you for any time spent on that and ask me for any further information.