Сегодня я столкнулся со следующей проблемой: при использовании списка с несколькими столбцами, как показано во фрагменте, где элементам списка присвоено margin-bottom, Chrome неправильно отображает нижнюю часть столбцов, отправляясобытия при наведении на неправильное значение <li> при наведении курсора чуть ниже нижнего.
Чтобы увидеть этот эффект, просто наведите курсор на нижнюю часть нижнего элемента в крайнем левом столбце.Он кратко выделяет 4-й элемент для одного пикселя, после чего выделяет 3-й.
ul {
columns: 3;
margin: 0;
padding: 0;
}
li {
list-style: none;
background: #6F6;
margin-bottom: .4em;
cursor: pointer;
}
li:hover {
background: #CFC;
}
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
<li>Sit</li>
<li>Amet</li>
<li>Consectetur</li>
<li>Adipiscing</li>
<li>Elit</li>
</ul>
Это, кажется, происходит только в Chrome (стабильный, 69.0.3497.100) и Safari (а также в Internet Explorer 10 и 11), а не в FF /Край.Также кажется, что это сохраняется, даже если я добавляю что-то вроде margin-bottom: -1px; overflow: hidden; к родителю ul.
Мой вопрос: есть ли способ предотвратить это, не изменяя (заметно) способ, которым элементысмотри?
Редактировать: В соответствии с просьбой, кто-то послал демонстрацию, иллюстрирующую эффект во фрагменте: 
Редактировать2: Изменен gif для фрагмента и добавлена информация о версии браузера (Chrome 69.0.3497.100) и IE10 / IE11.Интересным в IE является то, что этот эффект больше не является единственной невидимой строкой пикселей, а представляет собой видимую полосу пикселей, на которую влияют.Смотрите изображение ниже.