Why Does My Image Jitter When Hovering Over It in Chrome?

Hovering over Images: Chrome Opacity Issue

When encountering issues with image movement during hover actions in Chrome, specifically with an opacity effect, it's essential to address the root cause. In this particular case, the CSS rule:

opacity: 0.5;

Causes the image to become translucent (50% opacity) when the cursor hovers over it. However, a Chrome-specific issue occurs due to hardware acceleration and WebGL rendering.

The Solution:

To solve this problem, it's recommended to implement the -webkit-backface-visibility: hidden; property on the hover element that applies the opacity. This property relates to transform and ensures that the browser understands the image is in a 3D space, preventing the jittering effect.

Specifically, the following rule can be added to the CSS:

.img:hover {
  -webkit-backface-visibility: hidden;
}

Additional Information:

It's important to note that -webkit-backface-visibility is a webkit-specific property, so other browsers may not support it. For more information and browser compatibility, refer to the following resource: https://css-tricks.com/almanac/properties/b/backface-visibility/.

The above is the detailed content of Why Does My Image Jitter When Hovering Over It in Chrome?. For more information, please follow other related articles on the PHP Chinese website!