Archived topic
Strange background gradient issue on mobile
7 replies · Started by Greg on November 14, 2021
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
Hi there,
i am seeing this:
https://www.screencast.com/t/ETUw4mBch
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.
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
Glad to be of help
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
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.
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
Glad to hear that
