Background-Size Transition on Hover Causes Chrome to "Shake" Background Image

background-size transition on hover causes chrome to shake background image

just use transform, scale.

so just instead of setting the bg image to 160% use

transform:scale(1.5);

some information about the transform css property you can find here

to use the transform scale in your case you will need a wrapper with overflow hidden so just the inner div gets bigger and cut of by the outer div.

see updated fiddle.

greetings timmi

Background is shaking in transition

I have optimized the code and considered the use of left/right to define the size of the element then changed the width transition with a translation.

section {  max-width: 1920px;  position: relative;  overflow: hidden;  height: 500px;}
.container {  position: absolute;  top: 0;  bottom:0;  transition:transform 1s linear;  overflow: hidden;  transform: skew(20deg);}
.left {  left: -60vw; /*to create the overflow*/  right: calc(55% + 10px); /*10px distance between both element*/  border-radius: 0 20px 20px 0;}
.right {  right: -80vw;  left: 45%; /*100% - 55% (the right value of .left)*/  border-radius: 20px 0 0 20px;}
.left::after,.right::after {  content: "";  position: absolute;  top: 0;  left: -40%;  bottom: 0;  right: -40%;  transform: skew(-20deg);  background-position: center;  background-repeat: no-repeat;  background-size: 100% 100%;  transition:transform 1s linear;}
.left::after {  background-image: url(https://cdn.pixabay.com/photo/2018/12/04/22/38/road-3856796__340.jpg);  transform-origin: bottom;}
.right::after {  transform-origin: top;  background-image: url(https://media.istockphoto.com/photos/taking-a-walk-in-the-woods-picture-id1130258547?s=2048x2048);}
.right:hover {  transform: skew(20deg) translateX(-60vw);}
.right:hover::after {  transform: skew(-20deg) translateX(60vw);}

<section>  <div class="container left"></div>  <div class="container right"></div></section>

Image moves on hover when changing filter in chrome

This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon.

Here's a reduced test case: https://codepen.io/chasebank/pen/KZgYXK

Here's the Chromium issue marked for triage.

I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It's never a good idea to hack around an acknowledge browser bug.

We can take some comfort in the fact that the only other people seeing this are Chrome users who recently updated. My first try was asking a Slack channel full of skilled devs, and even they weren't seeing it.

$('#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>

Css transition shaking

It shakes because you're animating from no box-shadow (0px) to a box-shadow (6px).

Personally I would use the border property over box-shadow in this situation. The main thing to do here is define the border/box-shadow ahead of time but don't display it. To do that you can set the color to transparent, then when you hover you set it to the color you want.

Here's some pseudo code of what to do:

header {  border-top: 5px solid purple;}ul,li {  margin: 0;  padding: 0;  list-style: none;}li {  float: left;  margin: -5px;  padding: 15px 25px;  border-top: 5px solid transparent;  transition: all 300ms ease-in-out;}li:hover {  border-top: 5px solid yellow;}

<header>  <nav>    <ul>      <li><a href="#">Link 1</a>      </li>      <li><a href="#">Link 2</a>      </li>    </ul>  </nav></header>

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.

---

Related Topics