left: 50%; transform: translateX(-50%);These boxes are centered by position: relative; left: 50%; and transform: (translate functions).
When the width of the box has odd number of pixel, scrollbar is splitted by several ugly cracks.
Maybe it's a problem of subpixel, but I guess they've already dealt with this problem on div boxes themselves, but not yet on scrollbars.
* Strangely enough, it doesn't occur with translateX(-49%) or translateX(-51%).
The cracks disappear when I use translate3d in place of translate, but text-content becomes terribly blurred if the width is wide enough and the scrollbar is gone.
So it's not a good workaround of this issue.
* What is worse, the cracks no longer disappear even I use translate3d in Chrome Canary 72.0.3614.0
* It occurs in Chrome 70.0.3538.102
* This page is related to Issue 906496.
* This was fixed in Chrome Canary 73.0.3674.0