Double line issue on mobile browsers

[4unkur]

There is an issue on mobile Chrome browser Xiaomi Redmi 4X

I've checked on iPhone 5s, HTC, Xiaomi Redmi Note 4X
and issue is happening only on Redmi 4X as I tested it on another Redmi 4X and WAS able to reproduce...

Sometimes another line appears, please see this GIF:

[jmarikle]

After some testing I think this issue is likely fixable by changing transform: rotate(3deg) translate(0px, -4px); to transform: rotate(3deg) translate3d(0px, -4px, 0); or by adding will-change: transform; to the #nprogress .peg style. This forces GPU rendering which fixes a lot of issues like this in webkit browsers. will-change is a fairly new addition to CSS that hints to the browser that certain changes are expected to occur, which allows the browser time to prepare for those changes ahead of time.

@rstacruz Do you accept pull requests for this sort of thing? I'd be happy yo make one. The potential fix is a very minor change to the CSS file.

Also, as a side note, since I'm already talking about the transform: rotate(3deg) translate(0px, -4px); bit of the CSS. Is there a reason translate(0px, -4px) was used instead of transform-origin: bottom right;?