title: Why does transform with transition cause the whole page to repaint?
body: <p>First, open chrome devtools, trigger <img src="https://user-images.githubusercontent.com/18418010/37035327-2b6f823c-2187-11e8-9d8a-dfabc3410912.png" alt=""></p>
  
  <p>And then hover the first div, you will find that if you remove the <code>transition</code> property, only first div is repainted, but if you add the <code>transition</code> property, the <strong>whole</strong> page will be repainted, is there anyone could explain this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt; 11111111111111111 &lt;/div&gt;
  &lt;div&gt; 222222222222222222 &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>JSFiddle demo: <a href="https://jsfiddle.net/heaven_xz/4q2kgr2g/5/" rel="noreferrer">https://jsfiddle.net/heaven_xz/4q2kgr2g/5/</a></p>