Why does conversion with transition lead to redrawing of the whole page?

Question

First open chrome devtools, trigger

And then hover over the first div, you will find that if you delete the property transition, only the first div will be repainted, but if you add the property transition, the whole page . will be repainted, can anyone 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>

Run codeHide result

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

Answer 1

There are two things you must do to increase productivity.

The first is to declare only the transition to the properties that you want to change.

, Chrome , . , , .

, Chrome , , .

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>

Hide result

Answer 2

. .