CSS scale transform uses CPU for repaint

Viewed 540

I have to scale a div up and down with very fast rate (using GPU), but all browsers, except Safari, try to "improve" visual quality with CPU repaint. But it is very slow for my task that it should work even on very cheap Android Phones.

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

Safari (correct, GPU)

Firefox (incorrect, CPU):

Firefox (incorrect, CPU)

How can I prevent CPU repainting?

ADD: Text is just an example, it is pretty complex div box, which is slow on repaint.

2 Answers
Related