How to force re-render after a WebKit 3D transform in Safari

by

The reason why the text is blurry is because Webkit is treating the text as an image, I guess it’s the price of being hardware accelerated. I’m assuming you are using transitions or animation keyframes in your ui, otherwise the performance gains are negligible and you should switch to non-3d transforms.

You can either:

• Add an eventlistener for transitionend and then replace the 3d transform for a standard transform, such as…

element.addEventListener("transitionend", function() {
  element.style.webkitTransform = 'scale(2,2)'
},false);

• Since Webkit treats stuff as an image, it’s better to start big and scale down. So, write your css in your “end state” and scale it down for your normal state…

 #div {
  width: 200px; /*double of what you really need*/
  height: 200px; /*double of what you really need*/
  webkit-transform: scale3d(0.5, 0.5, 1);
}

 #div:hover {
  webkit-transform: scale3d(1, 1, 1);
}

And you get a crispy text on hover. I made a demo here (works on iOS too):

http://duopixel.com/stack/scale.html

More Related Contents:

  1. How can I force WebKit to redraw/repaint to propagate style changes?
  2. How to remove the border highlight on an input text element
  3. css z-index lost after webkit transform translate3d
  4. WebKit: Blurry text with css scale + translate3d
  5. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  6. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  7. 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
  8. WebKit CSS content Unicode bug?
  9. is there a css hack for safari only NOT chrome?
  10. What are -moz- and -webkit-? [duplicate]
  11. Disable webkit’s spin buttons on input type=”number”?
  12. Is there a CSS hack to affect Safari only NOT Chrome?
  13. CSS transition shorthand with multiple properties?
  14. CSS endless rotation animation
  15. Webkit backface visibility not working
  16. Hiding textarea resize handle in Safari
  17. Why does stacking order change on webkit filter hover?
  18. How to detect if the OS is in dark mode in browsers?
  19. Some font-size’s rendered larger on Safari (iPhone)
  20. White space around css3 scale
  21. How to make radial gradients work in Safari?
  22. CSS3 Continuous Rotate Animation (Just like a loading sundial)
  23. Wonky text anti-aliasing when rotating with webkit-transform in Chrome
  24. background-attachment fixed with transform not working in Firefox
  25. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  26. Row Wrap in flex-box not wrapping in Safari
  27. Google Font not working on Safari
  28. Why is filter(drop-shadow) causing my SVG to disappear in Safari?
  29. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?
  30. (Really) Long Background Image Does Not Render on iPad Safari

Leave a Comment