Css Transition Effect Makes Image Blurry/Moves Image 1Px, in Chrome

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

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.

image blurs during CSS transition and is janky

Seems like Chrome specific issue.

Instead of transform:scale() you can animate width:

.caption:hover > span img{
  background: rgba(0, 158, 205, 0.45);
  transform: translate(0,10%) ;
  width:100%;
}

transform + transition causes jump or blurry content CSS

Seems there are some problem in the animation (CSS transition effect makes image blurry / moves image 1px, in Chrome?)

I'll let the text outside the transform's element.

1. put your .button inside .diamond
2. move .inner-diamond to be a sibling of the .diamond, give it a opacity: 0(remove .diamond-content's opacity:0)
3. set pointer-events:none to the .inner-diamond

use sibling method to fulfill it

.diamond:hover + .inner-diamond {
  opacity: 1
}

a quick demo(layout not pretty):
http://jsfiddle.net/r1kw37g5/6/

CSS Transition causing images in a tags to jump in chrome

At first see this answer enter link description here

The second, try to check element width, if it's 300.12px (float number width), try to fix width so it would be rounded.

Sometimes this problem dissapear after applying position:relative to the image.

Chrome has bugs. So there could be other solutions, and problems with that. It might be so, your case has no solution. Like round corners + zoom animation.

---

Related Topics