null transform hack 强制使用硬件加速

Posted 2020-06-09

-webkit-transform: translateZ(0);

-webkit-transform: translate3d(0,0,0);

 

作用：

1、切换到硬件合成模式，通常所有事情都CPU完成，硬件影像合成模式会将指定元素传给GPU 处理

2、创建一个新的图层，带有自己的backing surface(a graphics context into which layers are drawn)，通常来说并不是所有新建的图层都有自己的backing surface，大部分情况它们会共享一个。

 

CSS中以下属性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）来触发GPU渲染，请合理使用

 

chrome环境下决定是否应该带有自己的backing surface条件：

The layer has 3D or perspective transform CSS properties.

The layer is used by <video> element using accelerated video decoding.

The layer is used by a <canvas> element with a 3D context or accelerated 2D context.

The layer is used for a composited plugin, e.g. Flash or Silverlight.

The layer uses a CSS animation for its opacity or uses an animated webkit transform.

The layer uses accelerated CSS filters.

The layer has a descendant that is a compositing layer.

The layer has a sibling with a lower z-index which has a compositing layer (in other words the layer is rendered on top of a composited layer).

 

但在移动设备上，无限制的使用这个Hack会变得一团糟，因为它们的视频存储器(Video Random Access Memory)非常有限，所以很容易耗尽而导致渲染效果很不好。backing surface实质上是一种需要上传至GPU ，由它影像合成的结构。影像合成的过程中每一个独立的结构都需要上传到GPU然后按顺序被绘制出来。

 

同时使用：

backface-visibility: hidden; perspective:1000;

When working with 3d transform. Even "fake" 3D transforms. Experience tells me that these two lines always improve performances, especially on iPad but also on Chrome.