How to prevent banding on linear-gradients?

[raven666]

Hi people! I’m starting my portfolio project for the RWD section, and I’m trying to accomplish the background effect you can see on this pen.

I’m trying to change the background colors with movement from top-left corner to right-bottom corner, like a bouncing between corners. Not sure if I’m choosing the right words my english is not good enough.

Here is the code:

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
header {
    background: linear-gradient(-45deg, #19334d, #3e0e0e, #111a0a, #3e3942);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}

The problem is because the background-size, gradient is showing some unwanted bands, at least in firefox. Is there any other way to achieve this effect without the background-size property? O r something that I can do to prevent this behaviour?

Full code here: https://codepen.io/3dm777/pen/zYzKQPZ

Thanks in advance!