8

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>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Matt Dietsche
  • 578
  • 5
  • 17

1 Answers1

2

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.

Lunokhod
  • 495
  • 3
  • 7
  • 2
    To better replicate display: none based the given example, you'd also want to use { overflow: hidden; margin: 0; } on the hidden elements. This is a legit work-around as there is no lag, and will tide me over until the patch makes it to Chrome. – Matt Dietsche Mar 19 '15 at 16:41
  • 1
    Should mention that this wont work with inline elements. – Matt Dietsche Mar 19 '15 at 16:42