css gradient not rendering well on mobile phone

Question

I created a site with a gradient in the hero-section by using 3 stacked divs with something like

background: linear-gradient( to right bottom, purple, blue);

and I'm seeing a strange behavior in mobile. It should look like this:

But it looks like this instead:

You can reproduce it in this codepen: https://codepen.io/marnau/pen/GRxjBzM. When I open it on desktop I can see the gradient. On mobile I can't.

This site is where I'm having the problem: https://acupunt.cat on mobile. The problem occurs with both linear-gradient and radial-gradient.