Chrome не отображает цвет фона для одного дочернего элемента с абсолютным позиционированием с z-индексом и прокруткой переполнения

Я создал следующую тестовую страницу, чтобы продемонстрировать проблему:

<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>

Рабочий пример: https://jsfiddle.net/jfvtc1ek/

При открытии в Chrome 70.0.3538.77 элемент списка «Test11» при прокрутке отображается белым цветом, поскольку Chrome по какой-то причине не отображает цвет фона. Это как-то связано с абсолютным позиционированием родителя в сочетании с z-индексом.

Та же рабочий пример работает в Firefox, поэтому я не уверен, что это ошибка в Chrome?

.item-container { position: relative; } или .item { position: relative; } вроде исправляют.

— 09.11.2018 13:03

Отправлен отчет об ошибке: bugs.chromium.org/p/chromium/issues/detail?id=904370

— 12.11.2018 11:57

html css google-chrome

09.11.2018 12:34

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...