Why does transform with transition cause the whole page to repaint?

Question

First, open chrome devtools, trigger

And then hover the first div, you will find that if you remove the transition property, only first div is repainted, but if you add the transition property, the whole page will be repainted, is there anyone could explain this?

div {   
  width: 100px;   
  height: 100px;
}

div:first-child {   
  margin-bottom: 100px; 
}

div:first-child:hover {   
  transform: scale(1.4);   
  transition: all .3s;   
  background-color: red; 
}

<div> 11111111111111111 </div>
<div> 222222222222222222 </div>

JSFiddle demo: https://jsfiddle.net/heaven_xz/4q2kgr2g/5/

Answer 1

There are 2 things that you should do to improve performance.

The first one is to declare only transition to the properties that you are interested to change.

But the root of repainting issue is that Chrome is now using the new style will-change. If you declare it adequately, the repaint will now be what you are expecting.

About the reason why the Chrome team decided to stop trying to optimize this automatically and rely on the developper declaring it, I have really no idea.

reference here

div {   
  width: 100px;   
  height: 100px;
}

div:first-child {   
  margin-bottom: 100px; 
  will-change: transform, background-color;
}

div:first-child:hover {   
  transform: scale(1.4);   
  transition: transform .3s, background-color .3s;   
  background-color: red; 
}

<div> 11111111111111111 </div>
<div> 222222222222222222 </div>