Why does Chrome use more CPU when a large Knockout element is hidden?

Question

I think we can now argue this is a bug in webkit engine. This bug only appears when using css property display:none;. Is it due to how GPU using webkit render hidden elements? Well, i still don’t know…

SEE DEMO

This is the simplest workaround i can think of, this should not interfered with any of your other code: {e.g knockout observable}

CSS:
{added pointer-events as suggested by Brandon}

.hidden{opacity:0;pointer-events:none} //don't use display:none here

JS:

//don't use hide/show jq methods as internally it set display none (fadeOut() methods too)
$('#btn_show').click(function(){
    $('#bigdatadiv').removeClass('hidden');
});
$('#btn_hide').on('click',function(){    
   $('#bigdatadiv').addClass('hidden')
});

I’m aware this is just a workaround and that still not answering your question: why this is happening?

Leave a Comment Cancel reply