CSS scale transform uses CPU for redrawing
I need to scale a div up and down at a very high speed (using the GPU), but all browsers except Safari are trying to "improve" the visual quality with a CPU redraw. But for my task it is very slow to run even on very cheap android phones.
I made a sample:
div {
position: absolute;
}
.scaled {
transform: translateZ(0px) translate(0px, 30px) scale(10, 10);
transform-origin: 0 0;
}
<div>FUUUU</div>
<div class="scaled">FUUUU</div>
Safari (correct, GPU):
Firefox (wrong, CPU):
How to prevent reprogramming of the processor?
ADD: The text is just an example, it is a rather complex div that is slowly redrawing.
source to share
I don't really understand the meaning of your screenshots, but will still answer:
You just can't. As long as you are programming the web page and not the internet browsers themselves, you cannot change this behavior.
AFAIK, Mozilla Firefox is also starting to use GPUs for such processes and will launch in September 2017 with a new engine (Firefox 57). I don't know about Chrome / Chromium or others.
Well, there is actually another option: get the code and program a new internet browser with this feature yourself, Firefox and Chromium are open source.
source to share