what does -webkit-transform: translate3d(0,0,0); exactly do? Apply to body?

by

-webkit-transform: translate3d(0,0,0); makes some devices run their hardware acceleration.

A good read is found Here

Native applications can access the device’s graphical processing unit
(GPU) to make pixels fly. Web applications, on the other hand, run in
the context of the browser, which lets the software do most (if not
all) of the rendering, resulting in less horsepower for transitions.
But the Web has been catching up, and most browser vendors now provide
graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x, y and z axis. It’s only a technique to force the hardware acceleration.

An alternative is -webkit-transform: translateZ(0). And If there’s flickering on Chrome and Safari due to transforms, try -webkit-backface-visibility: hidden and -webkit-perspective: 1000. For more info refer to this article.

More Related Contents:

  1. How to make moving CSS objects like this?
  2. Custom bullet symbol for elements in that is a regular character, and not an image
  3. What makes the text on a element vertically centered?
  4. Is it possible to always show up/down arrows for input “number”?
  5. Make TBODY scrollable in Webkit browsers
  6. how to align the image to the center? [closed]
  7. Proper use of flex properties when nesting flex containers
  8. How can I override Bootstrap CSS styles?
  9. Nesting block level elements inside the tag… right or wrong?
  10. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  11. How can I expand floated child div’s height to parent’s height?
  12. Is it possible to put CSS @media rules inline?
  13. Applying a background to and/or
  14. Adding HTML entities using CSS content
  15. Using flex order property to re-arrange items for desktop and mobile views
  16. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  17. Align labels in form next to input
  18. CSS table-cell equal width
  19. Get rid of space underneath inline-block image [duplicate]
  20. How to apply an opacity without affecting a child element with html/css?
  21. Draw Circle using css alone [duplicate]
  22. Why my inline-block divs are not aligned when only one of them has text? [duplicate]
  23. HTML / CSS How to add image icon to input type=”button”?
  24. Pixels vs. Points in HTML/CSS
  25. Space between two rows in a table?
  26. CSS hide scroll bar if not needed
  27. The css padding is not working in outlook
  28. Floating Div Over An Image
  29. How to remove the space between list items [duplicate]
  30. How to create a heart shape using CSS?

Leave a Comment