CSS Gradient Poor Quality

Question

Hello guys,
You can check out my preloader here: http://apesdesk.apespark.com/ (Press ESC as soon as you open the page in order to stop loading the rest of the website and see the loader as much time as you need)

When you do so, you'll see the problem with the quality of the background linear gradient quality. The GIFs quality is way better than the CSS's gradient quality. I have no idea why this is caused and how I should fix it. Normally CSS shouldn't have those issues as it's actually computing the gradient, it's not an image, etc. to have lossless quality.

Regards,
Denis Saidov
ApesPark

P.S. I've temporary commented everything else and made the loader to loop infinitely.

Answer 1

I tried to tag your name but it won't work. As mentioned in my comment -

I'm getting the same issue. For a workaround solution I would suggest using a pseudo element to cover either the top or bottom of the page instead.

E.g.

 #preloader {
  background-color: #fff;
 } 

 #preloader::before { 
  position:  absolute; 
  top: 0; 
  left: 0: 
  height: 50%; 
  right: 0;
  background-color: #477FE7; 
  z-index: 0; 
 }

Cheers, Conor