As some of you might be aware Chrome has a specific rounding bug when rendering background-size:cover. This occurs a lot with Cornerstone (X and Pro) when you’re using a section’s two-layered background and set an image and an overlaying image that contains solid surfaces around the edges.
- So let’s say you have set the page background to be white;
- You have also set a section’s lower background as a photo with
background-size:cover; - And you have set the upper background as a graphic that has a white-colored shape along the left edge.
When rendering in Chrome, the lower background would show a thin edge (subpixel width) along the left edge before the upper background’s white shape, effectively cancelling out whatever visual effect you wished to achieve. The problem is described in further detail here:
I wanted to share a solve I’ve been applying and propose the developers consider merging it into the theme’s CSS.
/*
** Fix Chrome's faulty rounding issue rendering background-size:cover by applying overscan principle inspired
** by https://medium.com/@ryanjw/buggy-edges-in-chrome-when-using-background-size-cover-dd6eb44541fc
*/
/* Overscan slightly */
[class^="x-bg"] {
width: calc(100% + 2.5px);
height: calc(100% + 2.5px);
top: -1.25px;
left: -1.25px;
}
/* Overscan more for HiDPI displays */
@media (-webkit-min-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 13/10),
(min-resolution: 120dpi),
(min-resolution: 1.3dppx)
{
[class^="x-bg"] {
width: calc(100% + 5px);
height: calc(100% + 5px);
top: -2.5px;
left: -2.5px;
}
}
Apologies if the code spacing comes out a little wonky from the copy-paste.
Hope this helps someone out there 
Cheers!