Chrome v41+ performance issue with display: none; on lots of nodes

Question

I've recently noticed Chrome puking when applying display: none; to lots of nodes:

CodePen example

In the CodePen above, you can see the lag when toggling display: none; on 1000 elements. If you bump the 1000 to 3000 and toggle it again, the tab will hang completely. The same code works without any lag in Safari, and I'm 90% sure this was working fine in Chrome until the last month or so, so I'm guessing this is a recent Chrome bug. Has anyone else run into this and found a work around? (I have web app functionality that renders 3000+ elements, hides them all with CSS, and then shows them on demand with JS. Currently the page won't even load.)

Edit: Should have mentioned I'm seeing this in Chrome 41.0.2272.76 and Canary 43.0.2318.0. This does appear to be a bug that appeared somewhere in Chrome 41.x and has been reported.

$("button.hide").on("click",function(){
  $("div.wrap").toggleClass("hide");
});

.wrap.hide p {
  display: none;
}

button {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='hide'>toggle 'display: none;'</button>
<!-- * This just creates a div containing 1000 <p> tags */ -->
<div class='wrap'>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  ...
  <p>998</p>
  <p>999</p>
  <p>1000</p>
</div>

Answer 1

There is a workaround. Use { height: 0; } instead of { display: none; } and { height: initial; } instead of { display: block; }.

I used it when I faced the same problem with 1300+ items in Chrome.