0

In a Cordova app I am working on, I'd like to force hardware acceleration to render certain elements. A common way to achieve this is by using translate3d(0,0,0) CSS rule, as described here.

However, when I use this, SVG images no longer appear. Interesting part is when I use values other than 0s for translate3d(), for instance translate3d(1,1,1), the images start appearing again.

I am not sure if this is a bug with Webkit browsers (as it's evidenced in both Chrome and Safari), or there's something about using 0's for translate3d() that makes SVGs no longer appear.

Any insights would be appreciated.

Community
  • 1
  • 1
GoldenD
  • 475
  • 1
  • 5
  • 10

1 Answers1

1

There are quite a few ways to try and force hardware acceleration and they change dependant on browser and device.

Here are a couple of possible ways:

// 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);

You can read up more on it here: Increase Your Site’s Performance with Hardware-Accelerated CSS

Stewartside
  • 20,378
  • 12
  • 60
  • 81