Use CSS to enable hardware acceleration example code on desktop and mobile

Did you know that we can use CSS to enable hardware acceleration in the browser to enable the GPU (Graphics Processing Unit) to function, thus improving performance?

Most computer graphics cards now support hardware acceleration. In view of this, we can use the power of the GPU to make our website or application perform more smoothly.

Enable hardware acceleration with CSS on desktop and mobile

CSS animations, transforms and transitions do not automatically enable GPU acceleration, but are performed by the browser's slow software rendering engine. So how can we switch to GPU mode? Many browsers provide certain triggered CSS rules.

Now, Chrome, FireFox, Safari, IE9+ and the latest version of Opera all support hardware acceleration, which will be turned on when they detect that certain CSS rules are applied to a DOM element in the page, most notably 3D transformation of the characteristic element.

For example:

.cube
 {
   -webkit-transform:
 translate3d(250px,250px,250px)
   rotate3d(250px,250px,250px,-120deg)
   scale3d(0.5,0.5,0.5);
}

But in some cases, we do not need to apply 3D transformation effects to elements, so what should we do? At this time we can use a little trick to "trick" the browser to enable hardware acceleration.

Although we may not want to apply 3D transformation to elements, we can still turn on the 3D engine. For example, we can use transform: translateZ(0); to enable hardware acceleration.

.cube
 {
   -webkit-transform:
 translateZ(0);
   -moz-transform:
 translateZ(0);
   -ms-transform:
 translateZ(0);
   -o-transform:
 translateZ(0);
   transform:
 translateZ(0);
   /*
 Other transform properties here */

}

In Chrome and Safari, when we use CSS transforms or animations, the page may flicker. The following code can fix this situation:

.cube
 {
   -webkit-backface-visibility:hidden;
   -moz-backface-visibility:hidden;
   -ms-backface-visibility:hidden;
   backface-visibility:hidden;
 
   -webkit-perspective:1000;
   -moz-perspective:1000;
   -ms-perspective:1000;
   perspective:1000;
   /*
 Other transform properties here */
}

In browsers with webkit core, another effective method is

.cube
 {
   -webkit-transform:
 translate3d(0,0,0);
   -moz-transform:
 translate3d(0,0,0);
   -ms-transform:
 translate3d(0,0,0);
   transform:
 translate3d(0,0,0);
  /*
 Other transform properties here */
}

Students who need to learn CSS please pay attention to the php Chinese website CSS video tutorial, many css online video tutorials can Free to watch! ​

The above is the detailed content of Use CSS to enable hardware acceleration example code on desktop and mobile. For more information, please follow other related articles on the PHP Chinese website!