Chrome 70 bug

HTML

<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">
	<h1>
  	Chrome 70 bug
	</h1>
  <p>
  	If you scroll the list down to hide the first item, 
    then scroll back up, the first item disappears (in Chrome 70).
	</p>
  <p>
  	If you resize the browser after that, the item re-appears.
	</p>
  <p>
  	The list has <b>position:fixed</b> and <b>z-index:1500</b>.
	</p>
  <button id="btn" class="btn btn-primary">
    Show The Problem
  </button>
  <div id="list"></div>
</div>

CSS

#list {
    position: absolute; /* problem */
    z-index: 1500; /* problem */
    border: 1px solid #c0c0c0;
    height: 250px;
    overflow: auto;
}
#list div {
    padding: 8px;
}
.selected {
    background: #337ab7;
    color: white;
}
#list, #btn {
    margin: 12px;
}

JavaScript

// populate list
var div = document.getElementById('list'),
    data = 'New York,Los Angeles,Chicago,Houston,Tokyo,Osaka,Kyoto,Sendai,London,Birmingham,Manchester,Liverpool'.split(',');
data.forEach(function (item) {
  var dvItem = document.createElement('div');
  dvItem.textContent = item;
  div.appendChild(dvItem)
});
	
// select the first item
div.children[0].classList.add('selected')

// scroll down and back up to show the problem
document.getElementById('btn').addEventListener('click', function () {
  div.scrollTop = 200;
  setTimeout(function () {
    div.scrollTop = 0;
  }, 100)
});