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

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/

+4
source share
2 answers

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 , , .

dev google page

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
+3

. .

0

Source: https://habr.com/ru/post/1694537/


All Articles