Element disappears after removing class

I've come across some strange behavior in Chrome 60.0 when removing a class from an element with a very specific configuration.

I removed the fade class from an <h1> element and it makes it completely disappear. The problem can be reproduced by removing the class in the dev-tools element inspector as well. Can anyone tell me what's going on here?

The element should just go back 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>