search

rstacruz / nprogress

For slim progress bars like on YouTube, Medium, etc
http://ricostacruz.com/nprogress
MIT License
25.99k stars 1.81k forks source link

Double line issue on mobile browsers #194

Open 4unkur opened 6 years ago

4unkur commented 6 years ago

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:

ezgif com-video-to-gif 1

jmarikle commented 6 years ago

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;?