divs are breaking the layout during css transition

Question

I have several divs side by side floating on left and spread on multiple lines:

<!doctype html>
<html>

<head>
  <style>
    * {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
}

.elem {
    height: 300px;
    width: 150px;
    background-color: rgba(230,230,230,1);
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    margin: 20px;
    padding: 10px;
    float: left;
    transition: all 0.5s ease;
}

.elem:hover {
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    margin: 10px;
    padding: 20px;
    background-color: rgba(130,230,230,1);
}

.w140 { width: 140px; }
.w70  { width: 70px;  }
.w200 { width: 200px; }
.w50  { width: 50px;  }

.grid {
    width: 100%;
}

  </style>
</head>

<body>
  <div class="grid">
    <div class="elem w140">elem1</div>
    <div class="elem">elem2</div>
    <div class="elem w200">elem3</div>
    <div class="elem w50">elem4</div>
    <div class="elem">elem5</div>
    <div class="elem">elem6</div>
    <div class="elem w70">elem7</div>
    <div class="elem w50">elem8</div>
    <div class="elem">elem9</div>
    <div class="elem w200">elem10</div>
</div>
</body>

</html>

This works perfectly fine on firefox. But on Chrome (Version 55.0.2883.87 to be exact) when hovering some elements (for example the last one before a "line break"), the layout will get messed up during the transition duration.

How do I prevent this?

Fiddle at http://jsfiddle.net/d6rs6gsq/

score 4 · Accepted Answer · edited May 23 '17 at 12:00

I found a workaround referring to Animating margins and padding with CSS Transition causes jumpy animation

use css scale transform instead of manipulating the padding and margin values.

 .elem {
    height: 300px;
    width: 150px;
    background-color: rgba(230,230,230,1);
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.3);
    margin: 20px;
    padding: 10px;
    float: left;
    transform:scale(1);
    transition: all 0.5s ease;
}

.elem:hover {
    -webkit-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    -moz-box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 38px 0px rgba(0,0,0,0.7);
    transform:scale(1.1);
    background-color: rgba(130,230,230,1);
}

http://jsfiddle.net/d6rs6gsq/2/

Hope it solves

tao · Answer 2 · 2016-12-23T08:26:49.700

It happens when the last element in the row animates with the one before it. Since the animation is ease and not linear, there are points during the combined animations when they create "corners" into which elements from next row are floating.

There are multiple ways to get rid of this unwanted effect. First, you shouldn't be animating padding or margin for grid elements. The rule of thumb in animation is: Never animate the space the element occupies, but only the element's rendered image. You want to use transforms or position:relative and top|right|bottom|left as none of these modify the space an element takes in document's flow.

However, the simplest solution in your case would be remove float:left from your .elem and apply: display:flex;flex-wrap:wrap; to your grid. The flex grid is smart enough to not break rows below based on inconsistencies in height of elements in previous row. It's one of the many advantages of the flexbox model over the box model.

Updated fiddle: http://jsfiddle.net/websiter/d6rs6gsq/3/

divs are breaking the layout during css transition

2 Answers2