SVG-изображение не отображается при переводе3d (0,0,0); применяется правило. Ожидаемая?

Question

В приложении Cordova, над которым я работаю, я хотел бы заставить аппаратное ускорение отображать определенные элементы. Общим способом достижения этого является использование правила translate3d(0,0,0) CSS, as described here.

Однако, когда я использую это, изображения SVG больше не отображаются. Интересная часть - это когда я использую значения, отличные от 0, для translate3d(), например translate3d(1,1,1), изображения начинают появляться снова.

Я не уверен, что это ошибка с браузерами Webkit (как это показано в Chrome и Safari), или что-то об использовании 0 для translate3d(), что делает 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