CSS transition effect makes image blurry / moves image 1px, in Chrome?

by

2020 update

  • If you have issues with blurry images, be sure to check answers from below as well, especially the image-rendering CSS property.
  • For best practice accessibility and SEO wise you could replace the background image with an <img> tag using object-fit CSS property.

Original answer

Try this in your CSS:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

What this does is it makes the division to behave “more 2D”.

  • Backface is drawn as a default to allow flipping things with rotate
    and such. There’s no need to that if you only move left, right, up, down, scale or rotate (counter-)clockwise.
  • Translate Z-axis to always have a zero value.
  • Chrome now handles backface-visibility and transform without the -webkit- prefix. I currently don’t know how this affects other browsers rendering (FF, IE), so use the non-prefixed versions with caution.

More Related Contents:

  1. Is there any way to hover over one element and affect a different element? [duplicate]
  2. image moves on hover – chrome opacity issue
  3. CSS Image Effects
  4. How to change the cursor into a hand when a user hovers over a list item?
  5. How to Create Grid/Tile View? [duplicate]
  6. img src SVG changing the styles with CSS
  7. Remove white space below image [duplicate]
  8. CSS force image resize and keep aspect ratio
  9. Make div stay at bottom of page’s content all the time even when there are scrollbars
  10. What is the opposite of :hover (on mouse leave)?
  11. Change opacity on all elements except hovered one
  12. Adjust list style image position?
  13. How to use ‘hover’ in CSS
  14. CSS: Hover one element, effect for multiple elements?
  15. SVG USE element and :hover style
  16. CSS disable hover effect
  17. Bootstrap icons are loaded locally but not when online
  18. How do I center an SVG in a div?
  19. Difference between static and relative positioning
  20. CSS: 100% width or height while keeping aspect ratio?
  21. Cross browser way to rotate image using CSS?
  22. Replace input type=file by an image
  23. Symfony2 – Assetic – load images in CSS
  24. CSS hover border makes elements adjust slightly
  25. Is it possible to change only the alpha of a rgba background colour on hover?
  26. prevent a pseudo element from triggering hover?
  27. vertical-align image in div [duplicate]
  28. How to use images in css with Webpack
  29. Firefox blurs an image when scaled through external CSS or inline style.
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment