Item disappears after class is deleted

Question

I came across some weird behavior in Chrome 60.0 when deleting a class from an element with a very specific configuration.

I removed the fade class from the <h1> element and it completely disappeared. The problem can be reproduced by removing the class in the dev-tools element inspector. Can someone tell me what is going on here?

The element should simply return to full opacity after clicking the button.

 var button = document.querySelector('button'); var h1 = document.querySelector('h1'); button.addEventListener('click', function(){ h1.classList.remove('fade'); }); 

 .center { overflow: hidden; } h1 { float: left; overflow: hidden; } .fade { opacity: .2; } 

 <div class="center"> <div> <h1 class="fade">Watch me disappear</h1> </div> </div> <button>Click</button> 

Answer 1

Overflow removal: a hidden property defined for h1 will solve your problem.

 var button = document.querySelector('button'); var h1 = document.querySelector('h1'); button.addEventListener('click', function() { h1.classList.remove('fade'); }); 

 .center { overflow: hidden; } h1 { float: left; } .fade { opacity: .2; } 

 <div class="center"> <div> <h1 class="fade">Watch me disappear</h1> </div> </div> <button>Click</button>