Chrome v41 + Leistungsproblem mit Anzeige: keine; auf viele Knoten

Question

habe festgestellt, ich kürzlich puking Chrome wenn display: none; zu viele Knoten Anwendung:

CodePen example

Im CodePen oben, können Sie die Verzögerung sehen können, wenn display: none; auf 1000 Elemente Makeln. Wenn Sie die 1000 auf 3000 stoßen und es erneut umschalten, bleibt die Registerkarte vollständig hängen. Derselbe Code funktioniert ohne Verzögerung in Safari, und ich bin mir 90% sicher, dass dies bis zum letzten Monat in Chrome funktioniert hat, also vermute ich, dass dies ein neuer Chrome-Bug ist. Ist jemand anderes dazu gekommen und hat eine Arbeit gefunden? (Ich habe Web-App-Funktionalität, die 3000+ Elemente rendert, verbirgt sie alle mit CSS, und zeigt sie dann auf Nachfrage mit JS. Derzeit wird die Seite nicht einmal geladen.)

Edit: Sollte erwähnt habe ich sehe dies in Chrome 41.0.2272.76 und Canary 43.0.2318.0. Dies scheint ein Fehler zu sein, der irgendwo in Chrome 41.x aufgetreten ist und gemeldet wurde.

$("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

Es gibt eine Abhilfe. Benutze {Höhe: 0; } anstelle von {display: none; } und {height: initial; } anstelle von {display: block; }.

Ich habe es verwendet, als ich das gleiche Problem mit 1300 + Elemente in Chrome konfrontiert.