This test page has been created to showcase the issue:
<html>
<head>
<style>
.panel {
position: absolute;
width: 326px;
max-height: 200px;
overflow: scroll;
z-index: 1000;
}
.item-container {
width: 100%;
list-style: none;
outline: 0;
padding: 0;
border: 0 none;
box-sizing: border-box;
cursor: pointer;
}
.item {
width: 100%;
}
.item.highlighted {
color: #fff;
background-color: #103e61;
}
</style>
</head>
<body>
<div class="panel">
<ul class="item-container">
<li class="item">Test1</li>
<li class="item">Test2</li>
<li class="item">Test3</li>
<li class="item">Test4</li>
<li class="item">Test5</li>
<li class="item">Test6</li>
<li class="item">Test7</li>
<li class="item">Test8</li>
<li class="item">Test9</li>
<li class="item">Test10</li>
<li class="item highlighted">Test11</li>
<li class="item">Test12</li>
<li class="item">Test13</li>
<li class="item">Test14</li>
<li class="item">Test15</li>
</ul>
</div>
</body>
</html>
Check it out on Fiddle: https://jsfiddle.net/jfvtc1ek/
When viewed in Chrome version 70.0.3538.77, the "Test11" list item appears in white once scrolled into view. Chrome seems to have trouble rendering the background-color due to the parent's absolute positioning and z-index settings.
The same fiddle behaves correctly in Firefox, raising the question of whether this is a Chrome-specific bug?