为什么列计数在4K屏幕上的Chrome中显示细线？

Question

我发现Chrome处理高分辨率屏幕上的column-count属性时出现奇怪的渲染问题。我在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>

因此，当您将鼠标悬停在链接上时，有时会看到{/ {1}}，<a>和<li>周围出现非常细的白线/灰色线，具体取决于您将鼠标悬停在什么地方。有时线条仍然存在，有时将光标移到其他位置时线条消失。这些线条很细，我的意思是说它们比Web 1px单位小，它们是4K显示器上的一个像素。 这些非常薄，很容易错过！我建议将鼠标悬停在最后一栏中，因为这是我最常看到的链接。

陌生人仍然看起来好像浏览器窗口的大小会影响它的出现和强度。我有两个分辨率较低的监视器，因为额外的监视器已连接到我的主屏幕，并且也出现在它们的屏幕上，但是当尝试在非高分辨率的单个监视器上重新创建问题时，我看不到线条出现。

我正在使用Chrome版本68，但我也在较旧的版本中看到过它。

有什么想法吗？