How to redraw in browser?

Question

JavaScript

Disclaimer . Some smart people post links to let me google for you.
You need a proven cross-browser and cross-platform solution for use in production, not links to Google. Thank you.
The point is this. Need to scale in browser on mobile devices using pinch-to-zoom and rotate svg map.
Using scale3d or scale, at the moment of zooming, the map becomes a raster, so that everything is processed quickly. But after releasing the fingers, it is still raster unless css-transitions is enabled or redraw is performed. Enabling css-transitions is stupid, because everything lags, as the browser tries to make an animation between each state. But then she does redraw.
In the end, I settled on a hack

$('svg').hide();
$('svg').get(0).offsetHeight();
$('svg').show();

As a result, without the "blinking" of the svg element, it becomes sharp again without raster enlargement artifacts. There is a downside to this trick:
1) Doesn't work on the iphone
2) It's a dirty hack that can lead to further problems as well.
How, actually, to make this redraw normal?

Answer 1

There are different hacks for different browsers. People have even created libraries on this topic.
lmgtfy.com/?q=force+repaint+redraw+reflow

Answer 2

requestAnimationFrame
https://developer.mozilla.org/ru/docs/DOM/window.r...

Answer 3

Ta-dam! I already have an expression: Google knows everything !

Answer 4

After releasing
enable transitions
make scale(current scale + 0.01)
disable transitions via setTimeout