我可以强迫浏览器在元素变得可见之前对其进行栅格化吗？

Question

叫我疯了，但我正在使用香草DOM和TypeScript进行游戏。它不是繁重的动作，但是正在播放一些动画，这些动画是由JavaScript驱动的（在CSS中太复杂了）。

我已经在应用the common trick of translateZ(0)（称为null transform hack或不太准确的silver bullet）来将动画元素拖入其自己的渲染层，并且除了仅用于合成器的属性外，我没有设置任何动画（transform和opacity）。效果非常好：在游戏过程中，即使在较旧的移动设备上，一切都感觉像黄油一样光滑。

问题出在游戏开始时。那时，通过将opacity的动画从0设置为非零，大约70个经过单独变换和动画处理的元素在几秒钟的空间中逐一进入页面。这会在动画过程中造成可见的结结。

我的猜测是Chrome在这里太聪明了，只会在每个元素首次显示时对其进行栅格化。使用开发工具进行快速检查可以确认这一点，因为即使在动画制作过程中也会发生很多光栅化：

我希望在动画开始之前将所有这些元素栅格化一次，然后才触发动画。但是，如何在不向用户显示闪光的情况下，对不可见的元素进行栅格化处理？

我对仅使用Chrome的方法感到满意，但是跨浏览器会更好。