WebKit: Blurry text with css scale + translate3d

by

Webkit treats 3d transformed elements as textures instead of vectors in order to provide hardware 3d acceleration. The only solution to this would be to increase the size of the text and downscaling the element, in essence creating a higher res texture.

See here:
http://jsfiddle.net/SfKKv/

Note that antialiasing is still underpar (stems are lost) so I’m beefing up the text with a bit of text shadow.

More Related Contents:

  1. How to force re-render after a WebKit 3D transform in Safari
  2. Chrome / Safari not filling 100% height of flex parent
  3. How can I force WebKit to redraw/repaint to propagate style changes?
  4. How to remove the border highlight on an input text element
  5. How to style HTML5 range input to have different color before and after slider?
  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. Fixed element disappears in Chrome
  12. CSS endless rotation animation
  13. How to prevent Webkit text rendering change during CSS transition
  14. Webkit CSS to control the box around the color in an input[type=color]?
  15. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  16. Webkit backface visibility not working
  17. ‘Inverted’ border-radius possible? [duplicate]
  18. Why is text getting blurry and wobbles during 2d scale transform
  19. Why does stacking order change on webkit filter hover?
  20. White space around css3 scale
  21. CSS “outline” different behavior behavior on Webkit & Gecko
  22. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  23. Delay mouseout/hover with CSS3 transitions
  24. when scaling an element with css3 scale, it becomes pixelated until just after the animation is complete. I’m animating an element with a border
  25. WebKit CSS content Unicode bug?
  26. Translate X and Y percentage values based on elements height and width?
  27. Apply webkit scrollbar style to specified element
  28. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  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