Why is column-count rendering thin lines in Chrome on 4K screens? - html

Question

I have found an odd rendering issue in Chrome when it deals with the column-count property on high resolution screens. I am seeing this on a 4K screen.
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">Base Rock Minerals Locations
<ul class='children'>
<li class="page_item page-item-173">Base Rock Minerals</li>
<li class="page_item page-item-174">Bonne Terre, MO</li>
<li class="page_item page-item-175">Fruitland, MO</li>
</ul>
</li>
<li class="page_item page-item-169 page_item_has_children">BMC Sand Locations
<ul class='children'>
<li class="page_item page-item-170">BMC Sand, LLC</li>
<li class="page_item page-item-171">Old Monroe, MO</li>
</ul>
</li>
<li class="page_item page-item-163 page_item_has_children">BMC Stone Locations
<ul class='children'>
<li class="page_item page-item-164">BMC Stone</li>
<li class="page_item page-item-165">Defiance, MO</li>
<li class="page_item page-item-166">High Hill, MO</li>
<li class="page_item page-item-167">Warrenton, MO</li>
<li class="page_item page-item-168">Wright City, MO</li>
</ul>
</li>
<li class="page_item page-item-44">Eastern Missouri Concrete</li>
<li class="page_item page-item-141 page_item_has_children">Illinois Locations
<ul class='children'>
<li class="page_item page-item-142">Caseyville, IL</li>
<li class="page_item page-item-143">Columbia, IL</li>
<li class="page_item page-item-144">Hamel, IL</li>
<li class="page_item page-item-145">Lebanon, IL</li>
</ul>
</li>
<li class="page_item page-item-132 page_item_has_children">Missouri Locations
<ul class='children'>
<li class="page_item page-item-129">Arnold, MO</li>
<li class="page_item page-item-131">Chesterfield, MO</li>
<li class="page_item page-item-133">Chesterfield, MO (Gumbo)</li>
<li class="page_item page-item-134">Festus, MO</li>
<li class="page_item page-item-135">Maryland Heights, MO</li>
<li class="page_item page-item-136">O’Fallon, MO</li>
<li class="page_item page-item-137">St. Louis Downtown</li>
<li class="page_item page-item-128">Webster Groves, MO</li>
</ul>
</li>
<li class="page_item page-item-191">Ozark Building Materials</li>
<li class="page_item page-item-146 page_item_has_children">Politte Locations
<ul class='children'>
<li class="page_item page-item-148">Arcadia, MO</li>
<li class="page_item page-item-156">Bonne Terre, MO</li>
<li class="page_item page-item-157">Ellington, MO</li>
<li class="page_item page-item-158">Ellsinore, MO</li>
<li class="page_item page-item-159">Farmington, MO</li>
<li class="page_item page-item-147">Politte LLC</li>
<li class="page_item page-item-160">Potosi, MO</li>
<li class="page_item page-item-161">Van Buren, MO</li>
<li class="page_item page-item-162">Viburnum, MO</li>
</ul>
</li>
<li class="page_item page-item-149 page_item_has_children">RMC Locations
<ul class='children'>
<li class="page_item page-item-151">Fredericktown, MO</li>
<li class="page_item page-item-153">Perryville, MO</li>
<li class="page_item page-item-150">RMC, LLC</li>
<li class="page_item page-item-154">STE Genevieve, MO</li>
</ul>
</li>
<li class="page_item page-item-138 page_item_has_children current_page_ancestor current_page_parent">Rolla Locations
<ul class='children'>
<li class="page_item page-item-139 current_page_item">Rolla, MO</li>
<li class="page_item page-item-140">Salem, MO</li>
</ul>
</li>
</ul>
So when you hover over the links, you can sometimes see very thin white/gray lines appear around the <a>, <li> and <ul>, depending on what you are hovering over. Sometimes the lines persist, and sometimes they go away once you move the cursor elsewhere. These lines are pixel thin, and what I mean is they are smaller than a web 1px unit, they are one pixel on the 4K monitor. These are very thin and easy to miss! I recommend hovering over the links in the last column as that is where I see them most frequently.
Stranger still, it looks like the size of the browser window effects whether it appears and the intensity. I have two lower-res monitors as extra monitors hooked up to my main screen, and it appears for them as well, but when trying to recreate the issue on a single monitor that is not high-res, I cannot see the lines appear.
I am using Chrome version 68 but I've seen it in older versions as well.
Any ideas on what is happening?