Why Are My CSS Transitions Making Images Blurry in Chrome?

CSS Transition Effect Causing Blurry Images or Movement in Chrome

Problem:

When applying a CSS transition effect that involves moving a division, Chrome exhibits undesirable behavior such as making the image in the division blurry or displacing it slightly. This issue persists only when the page has scrollbars.

Solution:

To prevent these effects, implement the following CSS changes:

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

Explanation:

• -webkit-backface-visibility: hidden: Disables rendering of the division's backface, which is unnecessary for simple translations and transformations.
• -webkit-transform: translateZ(0) scale(1, 1); Sets the division's Z-axis translation to zero and scales it back to its original size, ensuring the image remains in place.

2020 Update:

• For blurry images, consider using the image-rendering CSS property as suggested in other answers.
• For accessibility and SEO, consider replacing background images with img tags and using the object-fit CSS property.

The above is the detailed content of Why Are My CSS Transitions Making Images Blurry in Chrome?. For more information, please follow other related articles on the PHP Chinese website!