css - translate3d(0,0,0) 时不显示 SVG 图像；规则被应用。预期的？

Question

在我正在开发的 Cordova 应用程序中，我想强制硬件加速以呈现某些元素。实现此目的的常见方法是使用 translate3d(0,0,0) CSS 规则，as described here .

但是，当我使用它时，SVG 图像不再出现。有趣的是，当我为 translate3d() 使用 0 以外的值时，例如 translate3d(1,1,1)，图像再次开始出现。

我不确定这是否是 Webkit 浏览器的错误(Chrome 和 Safari 都证明了这一点)，或者对 translate3d() 使用 0 导致 SVG 不再显示。

如有任何见解，我们将不胜感激。

Answer 1

有很多方法可以尝试强制硬件加速，并且它们会根据浏览器和设备而变化。

这里有几种可能的方法:

// translateZ Transform
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

// Backface Visibility
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;

// Perspective
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

// Translate3D transform
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);

您可以在这里阅读更多内容:Increase Your Site’s Performance with Hardware-Accelerated CSS