Wonky text anti-aliasing when rotating with webkit-transform in Chrome

by

Try triggering the CSS 3d Transform mode with webkit. this changes the way chrome renders

-webkit-transform: rotate(.7deg) translate3d( 0, 0, 0);

edit

There also a Webkit only style declaration -webkit-font-smoothing which takes the values

  • none
  • subpixel-antialiased
  • antialiased

where subpixel-antialiased is the default value.

Alas, the subpixel antialias is no good solution for rotated text. The rendering machine cant handle that. The 3d transform switches to just antialiased. But we can try to set it directly.

See here http://maxvoltar.com/archive/-webkit-font-smoothing

More Related Contents:

  1. Chrome / Safari not filling 100% height of flex parent
  2. How can I force WebKit to redraw/repaint to propagate style changes?
  3. How to remove the border highlight on an input text element
  4. How to style HTML5 range input to have different color before and after slider?
  5. CSS rotate property in IE
  6. css3 transition animation on load?
  7. css z-index lost after webkit transform translate3d
  8. What are -moz- and -webkit-? [duplicate]
  9. Disable webkit’s spin buttons on input type=”number”?
  10. CSS transition shorthand with multiple properties?
  11. WebKit: Blurry text with css scale + translate3d
  12. Fixed element disappears in Chrome
  13. CSS endless rotation animation
  14. CSS3 transition on click using pure CSS
  15. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  16. Cross browser way to rotate image using CSS?
  17. Webkit backface visibility not working
  18. ‘Inverted’ border-radius possible? [duplicate]
  19. css rotate a pseudo :after or :before content:”” [duplicate]
  20. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  21. CSS3 transform on click using pure CSS
  22. Why does stacking order change on webkit filter hover?
  23. CSS3 property webkit-overflow-scrolling:touch ERROR
  24. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  25. CSS “outline” different behavior behavior on Webkit & Gecko
  26. Delay mouseout/hover with CSS3 transitions
  27. WebKit CSS content Unicode bug?
  28. Apply webkit scrollbar style to specified element
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment