Почему счетчик столбцов отображает тонкие линии в Chrome на экранах 4K?

Question

Я обнаружил странную проблему рендеринга в Chrome, когда он имеет дело со свойством столбца на экранах с высоким разрешением. Я вижу это на экране 4K.

body {
    background-color: #30271d;
    font-family: arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 18px;
    line-height: 1.2em;
    padding: 1em;
    border: solid 1px gray;
}

a {
    color: white;
    text-decoration: none;
    transition-property: color,background-color,border-color;
    transition-duration: .2s;
    transition-timing-function: linear;
}


.page-list {
    margin: 0 !important;
    display: block;
    padding:0;
    -webkit-column-count: 4;
    column-count: 4;
}

.page-list .page_item {
    padding: 0 !important;
    list-style: none;
    display: list-item;
}

.page-list .page_item a {
    padding: .25em 0 !important;
    display: block;
}

.dark-background .page-list .page_item a {
    color: #FDF9F5;
    font-weight: 400;
}

.page-list .children {
    padding-left: 1em;
    padding-bottom: .5em;
}

.page-list .page_item a:hover, .page-list .page_item a:focus {
    color: #FFEB00;
}

.page-list .current_page_item {
    opacity: .5;
}

@media screen and (max-width: 1000px) {
    .page-list {
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media screen and (max-width: 800px) {
    .page-list {
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media screen and (max-width: 480px) {
    .page-list {
        -webkit-column-count: 1;
        column-count: 1;
    }
}

<ul class="page-list ">
<li class="page_item page-item-172 page_item_has_children"><a href="#/locations/base-rock-minerals-locations/">Base Rock Minerals Locations</a>
<ul class='children'>
	<li class="page_item page-item-173"><a href="#/locations/base-rock-minerals-locations/base-rock-minerals/">Base Rock Minerals</a></li>
	<li class="page_item page-item-174"><a href="#/locations/base-rock-minerals-locations/bonne-terre-mo/">Bonne Terre, MO</a></li>
	<li class="page_item page-item-175"><a href="#/locations/base-rock-minerals-locations/fruitland-mo/">Fruitland, MO</a></li>
</ul>
</li>
<li class="page_item page-item-169 page_item_has_children"><a href="#/locations/bmc-sand-locations/">BMC Sand Locations</a>
<ul class='children'>
	<li class="page_item page-item-170"><a href="#/locations/bmc-sand-locations/bmc-sand-llc/">BMC Sand, LLC</a></li>
	<li class="page_item page-item-171"><a href="#/locations/bmc-sand-locations/old-monroe-mo/">Old Monroe, MO</a></li>
</ul>
</li>
<li class="page_item page-item-163 page_item_has_children"><a href="#/locations/bmc-stone-locations/">BMC Stone Locations</a>
<ul class='children'>
	<li class="page_item page-item-164"><a href="#/locations/bmc-stone-locations/bmc-stone/">BMC Stone</a></li>
	<li class="page_item page-item-165"><a href="#/locations/bmc-stone-locations/defiance-mo/">Defiance, MO</a></li>
	<li class="page_item page-item-166"><a href="#/locations/bmc-stone-locations/high-hill-mo/">High Hill, MO</a></li>
	<li class="page_item page-item-167"><a href="#/locations/bmc-stone-locations/warrenton-mo/">Warrenton, MO</a></li>
	<li class="page_item page-item-168"><a href="#/locations/bmc-stone-locations/wright-city-mo/">Wright City, MO</a></li>
</ul>
</li>
<li class="page_item page-item-44"><a href="#/locations/eastern-missouri-concrete/">Eastern Missouri Concrete</a></li>
<li class="page_item page-item-141 page_item_has_children"><a href="#/locations/illinois-locations/">Illinois Locations</a>
<ul class='children'>
	<li class="page_item page-item-142"><a href="#/locations/illinois-locations/caseyville-il/">Caseyville, IL</a></li>
	<li class="page_item page-item-143"><a href="#/locations/illinois-locations/columbia-il/">Columbia, IL</a></li>
	<li class="page_item page-item-144"><a href="#/locations/illinois-locations/hamel-il/">Hamel, IL</a></li>
	<li class="page_item page-item-145"><a href="#/locations/illinois-locations/lebanon-il/">Lebanon, IL</a></li>
</ul>
</li>
<li class="page_item page-item-132 page_item_has_children"><a href="#/locations/missouri-locations/">Missouri Locations</a>
<ul class='children'>
	<li class="page_item page-item-129"><a href="#/locations/missouri-locations/arnold-mo/">Arnold, MO</a></li>
	<li class="page_item page-item-131"><a href="#/locations/missouri-locations/chesterfield-mo/">Chesterfield, MO</a></li>
	<li class="page_item page-item-133"><a href="#/locations/missouri-locations/chesterfield-mo-gumbo/">Chesterfield, MO (Gumbo)</a></li>
	<li class="page_item page-item-134"><a href="#/locations/missouri-locations/festus-mo/">Festus, MO</a></li>
	<li class="page_item page-item-135"><a href="#/locations/missouri-locations/maryland-heights-mo/">Maryland Heights, MO</a></li>
	<li class="page_item page-item-136"><a href="#/locations/missouri-locations/ofallon-mo/">O&#8217;Fallon, MO</a></li>
	<li class="page_item page-item-137"><a href="#/locations/missouri-locations/st-louis-downtown/">St. Louis Downtown</a></li>
	<li class="page_item page-item-128"><a href="#/locations/missouri-locations/webster-groves-mo/">Webster Groves, MO</a></li>
</ul>
</li>
<li class="page_item page-item-191"><a href="#/locations/ozark-building-materials/">Ozark Building Materials</a></li>
<li class="page_item page-item-146 page_item_has_children"><a href="#/locations/politte-locations/">Politte Locations</a>
<ul class='children'>
	<li class="page_item page-item-148"><a href="#/locations/politte-locations/arcadia-mo/">Arcadia, MO</a></li>
	<li class="page_item page-item-156"><a href="#/locations/politte-locations/bonne-terre-mo/">Bonne Terre, MO</a></li>
	<li class="page_item page-item-157"><a href="#/locations/politte-locations/ellington-mo/">Ellington, MO</a></li>
	<li class="page_item page-item-158"><a href="#/locations/politte-locations/ellsinore-mo/">Ellsinore, MO</a></li>
	<li class="page_item page-item-159"><a href="#/locations/politte-locations/farmington-mo/">Farmington, MO</a></li>
	<li class="page_item page-item-147"><a href="#/locations/politte-locations/politte-llc/">Politte LLC</a></li>
	<li class="page_item page-item-160"><a href="#/locations/politte-locations/potosi-mo/">Potosi, MO</a></li>
	<li class="page_item page-item-161"><a href="#/locations/politte-locations/van-buren-mo/">Van Buren, MO</a></li>
	<li class="page_item page-item-162"><a href="#/locations/politte-locations/viburnum-mo/">Viburnum, MO</a></li>
</ul>
</li>
<li class="page_item page-item-149 page_item_has_children"><a href="#/locations/rmc-locations/">RMC Locations</a>
<ul class='children'>
	<li class="page_item page-item-151"><a href="#/locations/rmc-locations/fredericktown-mo/">Fredericktown, MO</a></li>
	<li class="page_item page-item-153"><a href="#/locations/rmc-locations/perryville-mo/">Perryville, MO</a></li>
	<li class="page_item page-item-150"><a href="#/locations/rmc-locations/rmc-llc/">RMC, LLC</a></li>
	<li class="page_item page-item-154"><a href="#/locations/rmc-locations/ste-genevieve-mo/">STE Genevieve, MO</a></li>
</ul>
</li>
<li class="page_item page-item-138 page_item_has_children current_page_ancestor current_page_parent"><a href="#/locations/rolla-locations/">Rolla Locations</a>
<ul class='children'>
	<li class="page_item page-item-139 current_page_item"><a href="#/locations/rolla-locations/rolla-mo/">Rolla, MO</a></li>
	<li class="page_item page-item-140"><a href="#/locations/rolla-locations/salem-mo/">Salem, MO</a></li>
</ul>
</li>

</ul>

Поэтому, когда вы наводите курсор мыши на ссылки, иногда вы можете увидеть очень тонкие белые / серые линии вокруг <a>, <li> и <ul>, в зависимости от того, над чем вы зависли. Иногда линии сохраняются, а иногда они исчезают, когда вы перемещаете курсор в другое место. Эти строки имеют толщину пикселя, и я имею в виду, что они меньше, чем единица веб-пикселя 1 пиксель, на мониторе 4K они составляют один пиксель. Они очень тонкие и их легко пропустить! Я рекомендую навести курсор на ссылки в последнем столбце, поскольку именно там я их вижу чаще всего.

Как ни странно, похоже, что размер окна браузера влияет на его вид и интенсивность. У меня есть два монитора с низким разрешением, поскольку дополнительные мониторы подключены к моему основному экрану, и он также отображается для них, но при попытке воссоздать проблему на одном мониторе, который не в высоком разрешении, я не вижу линий.

Я использую Chrome версии 68, но я видел его и в более старых версиях.

Есть идеи о том, что происходит?