title: Hiding a div and scaling the svg:path repaints whole parent area
body: <p>I have an SVG view filled with ~2500 shapes generated by D3. And when I mouseover a shape I want a tooltip to appear over it.  Mainly the HTML layout looks like this:</p>
  
  <pre><code>&lt;div id="main"&gt;
    &lt;div&gt;
      &lt;svg width="1000" height="800"&gt;
        &lt;g&gt;
          &lt;path transform="translate(249,432)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""&gt;&lt;/path&gt;
          . . . . . . .
          &lt;path transform="translate(349,332)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""&gt;&lt;/path&gt;
          &lt;path transform="translate(149,232)scale(1,1) d="m0,-10.229169346871444l8.858720514003744,10.229169346871442l-8.85872051400374,-5.114584673435718l-7.105427357601002e-15,-5.114584673435729z""&gt;&lt;/path&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  
    &lt;div id="tooltip" class="hidden"&gt;
      Hello World!
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the CSS of the tooltip:</p>
  
  <pre><code>#tooltip {position: absolute; top: 150; left: 150;}
  .hidden {display: none;}
  </code></pre>
  
  <p>Using Javascript I attach an <code>onmouseover</code> event to each <code>path</code> element. When the event is triggered the following happens:</p>
  
  <pre><code>var bin_mouseover = function() {
    var hex = d3.select(this),
        tooltip = d3.select();
    hex.attr('transform', hex.attr("transform").replace(/scale(.*)/g,"") + "scale(1.3)");
    tooltip.classed("hidden", false);
  }
  </code></pre>
  
  <p>I've noticed that the response on this event is very slow.
  Using Paint Rectangles in the Crome Developer Tools I've noticed that when the event is triggered, area of the whole <code>div#main</code> view is repainted instead of repainting only the area of <code>path</code> and <code>div#tooltip</code>.</p>
  
  <p>What is even more strange to me is that when in the JS function I leave only <code>hex.attr</code> scaling part, then only area of the corresponding <code>path</code> is repainted. Also if I leave only <code>tooltip.classed</code> part, hiding the tooltip view, only its area is repainted.</p>
  
  <p>But when I modify both <code>path</code> and <code>div#hexbin</code>, the whole area covered by <code>div#main</code> is repainted causing rendering of all ~2500 SVG elements, which is significantly slower.</p>
  
  <p>Does anyone know the reason of this behaviour and how it can be optimised?</p>
  
  <p><strong>EDIT 1:</strong> Another observation, I've made:</p>
  
  <p>In Firefox it also performs slowly, but if instead of altering the <code>transform</code> property of the <code>path</code> I change it's class which effectively changes the border colour of the path, then it works very fast. But in Webkit browsers like Safari and Chrome it still works slow, and Paint Rectangles still show that the whole parent <code>div#main</code> is repainted.</p>