javascript - CSS 缩放变换使用 CPU 进行重绘

Question

我必须以非常快的速度(使用 GPU)缩放 div，但所有浏览器(Safari 除外)都尝试通过 CPU 重绘来“改善”视觉质量。但是即使在非常便宜的 Android 手机上它也能运行，这对我的任务来说非常慢。

我做了一个样本:

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(正确，GPU):

Firefox(不正确，CPU):

如何防止 CPU 重绘？

ADD: Text 只是一个例子，它是一个非常复杂的 div 框，重绘速度很慢。

Answer 1

我真的不明白你的截图的意义，但无论如何都会回答:

很简单，你不能。只要您编写的是网页而不是互联网浏览器本身，就无法修改这种行为。

据我所知，Mozilla Firefox 正在努力开始将 GPU 用于此类进程，并将于 2017 年 9 月与新引擎 (Firefox 57) 一起推出。我不知道 Chrome/Chromium 或其他。

---

好吧，实际上还有另一种选择:获取代码并自行编写具有该功能的新互联网浏览器，Firefox 和 Chromium 都是开源的。