Image Moves on Hover When Changing Filter in Chrome

$('#toggleBlur').click(function() {  $('#content').toggleClass('blur')})

body {  padding: 5%;}
div {  filter: blur(0px);}
.blur {  filter: blur(.1px)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button id="toggleBlur">Toggle blur</button>
<div id="content">  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p></div>

image moves on hover - chrome opacity issue

Another solution would be to use

-webkit-backface-visibility: hidden;

on the hover element that has the opacity.
Backface-visibility relates to transform, so @Beskow's has got something to do with it. Since it is a webkit specific problem you only need to specify the backface-visibility for webkit. There are other vendor prefixes.

See http://css-tricks.com/almanac/properties/b/backface-visibility/ for more info.

Choppy transform with CSS filter on Chrome

I came up with a lightweight and well supported implementation.

I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.

img
  background-color: black
  opacity: 0.8
  transition: all 3s ease-in-out
  &:hover
     opacity: 1
     transform: scale(1.1)

Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm

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.

CSS animation using filter blur causing text jump on Chrome

It seems to be the cubic-bezier function. The last number is causing that "jump." You should probably report a bug. If you set that last number to something less than 0.9, it should look fine. Until it's fixed, use 0.89:

/*                                                         This number*/
animation-timing-function: cubic-bezier(0.165, 0.84, 0.44, 0.89);

css: avoid image hover first time blinking

Here is a simple and effective css image preloading technique I have used several times.
You can load several images by placing content: url() url() url()... etc.

body:after {
 display: none;
 content: url('path/to/image-hovered.jpg') url('path/to/another-image-hovered.jpg');
}

---

Related Topics