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

translate3d（0,0,0）时SVG图像不显示;规则适用。预期？

1 个答案: