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"><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’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>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?
