[Resolved] Strange background gradient issue on mobile

Home Forums Support [Resolved] Strange background gradient issue on mobile

Home Forums Support Strange background gradient issue on mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2004107
    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.

    Screenshot of website on mobile

    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

    #2004112
    David
    Staff
    Customer Support

    Hi there,

    i am seeing this:

    2021-11-14_16-37-33

    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.

    #2004124
    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

    #2004650
    David
    Staff
    Customer Support
    #2007454
    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

    #2007568
    David
    Staff
    Customer Support

    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.

    #2008088
    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

    #2008953
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.