[Resolved] Strange background gradient issue on mobile

[Greg]

Hi guys

I’m experiencing an odd issue with a background gradient, which doesn’t appear fully on mobile on first load, but when you scroll/move the page around it fully loads. The container background also has a background image set to 0.75 opacity.

It’s like the colour gradient doesn’t fully load at first – any ideas on what’s causing this and if there’s a way to fix it?

My site is at https://www.mantra.co.uk/

Thanks for any help
Greg

[David]

Hi there,

i am seeing this:

The highlighted CSS is in WP Rocket Critical CSS

Not sure what thats doing there – but i check the site with WP Rocket disabled, then that CSS is not loaded and the problem goes away.

[Greg]

Hi David

Thanks for the quick reply, it was some old rogue CSS I’d setup in Simple CSS, removing that has sorted it 🙂

Thanks
Greg

[David]

Glad to be of help

[Greg]

Hi guys

Sorry to re-open this topic, I’m noticing a strange issue with the background gradient where it doesn’t fully load until the cursor is moved on the screen – https://i.imgur.com/krMQGTy.mp4

Does anyone know a way around this? I’ve tried removing the background image and just having the gradient, but it does the same thing unfortunately.

Thanks for any help.
Greg

[David]

On initial load i still see the same CSS i pointed out above:

https://generatepress.com/forums/topic/strange-background-gradient-issue-on-mobile/#post-2004112

On hover i can see this class spai_has_js being added to the main HTML element. Which looks like the result of a ‘delay loading until interaction’ script – at which point the above CSS is removed, and problem solved.

So its whatever WP Rocket is doing thats causing a problem.

[Greg]

Thanks for your time, David – the hover class gave me something to investigate. Which I think was an odd settings issue between WP Rocket and Shortpixel AI, reinstalled/setup and all seems to be good now 🙂

Greg

[David]

Glad to hear that

[Author]

Posts