Blurry text after using CSS transform: scale(); in Chrome

by

I have had this problem a number of times and there seems to be 2 ways of fixing it (shown below). You can use either of these properties to fix the rendering, or both at the same time.

Backface visibility hidden fixes the problem as it simplifies the animation to just the front of the object, whereas the default state is the front and the back.

backface-visibility: hidden;

TranslateZ also works as it is a hack to add hardware acceleration to the animation.

transform: translateZ(0);

Both of these properties fix the problem that you are having but some people also like to add

-webkit-font-smoothing: subpixel-antialiased;

to their animated object. I find that it can change the rendering of a web font but feel free to experiment with that method too.

More Related Contents:

  1. css transform, jagged edges in chrome
  2. Background color not showing in print preview
  3. Bug with transform: scale and overflow: hidden in Chrome
  4. CSS Border radius not trimming image on Webkit
  5. rounded corners on html5 video
  6. CSS3 – How to style the selected text in textareas and inputs in Chrome?
  7. Chrome / Safari not filling 100% height of flex parent
  8. How can I force WebKit to redraw/repaint to propagate style changes?
  9. css3 transition animation on load?
  10. css z-index lost after webkit transform translate3d
  11. Webkit CSS to control the box around the color in an input[type=color]?
  12. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  13. webkit-transform overwrites z-index ordering in Chrome 13
  14. How to force re-render after a WebKit 3D transform in Safari
  15. content attribute of img elements
  16. CSS3 calc(100%-88px) not working in Chrome [duplicate]
  17. CSS3 Continuous Rotate Animation (Just like a loading sundial)
  18. WebKit CSS content Unicode bug?
  19. How to keep a flex item from overflowing due to its text? [duplicate]
  20. :not() selector not behaving the same between Safari and Chrome/Firefox
  21. Firing a keyboard event on Chrome
  22. How to clear basic authentication details in chrome
  23. navigator.clipboard is undefined
  24. ChromeWebDriver – unknown error: Chrome failed to start: crashed
  25. getUserMedia() not supported in chrome
  26. How to search all loaded scripts in Chrome Developer Tools?
  27. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  28. Javascript / Chrome – How to copy an object from the webkit inspector as code
  29. Using “word-wrap: break-word” within a table [duplicate]
  30. -webkit-font-smoothing property has no effect in Chrome

Leave a Comment