Why Does My CSS Transitioned Image Blur or Shift 1px in Chrome?

Chrome CSS Transition Blurring Image or Shifting 1px

A common issue arises when using CSS transitions to move a div: the image within the div becomes blurry or shifts slightly. This peculiar behavior only occurs when the transition involves translation and when the page contains scrollbars.

To resolve this issue, you can implement the following CSS properties to the affected div:

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

By doing so, you effectively make the division appear more "2D." Here's an explanation of each property's purpose:

• -webkit-backface-visibility: hidden: This property hides the backface of the division, which is typically drawn by default to allow flipping and rotation effects. Since you're only performing simple translations, hiding the backface eliminates unnecessary rendering.
• -webkit-transform: translateZ(0) scale(1, 1): This property assigns the Z-axis translation to zero, effectively flattening the division in the 3D space. Chrome handles this property natively, but it's included with the -webkit- prefix for compatibility with older Chromium versions.

The above is the detailed content of Why Does My CSS Transitioned Image Blur or Shift 1px in Chrome?. For more information, please follow other related articles on the PHP Chinese website!