Chrome – sitetitle and menu / nav

[DLB]

Hi @Richard

Just reading this forum post and thread from last year with interest, as I’m having similar issues.

I have my sitetitle and nav fixed with mix-blend-mode: difference; applied in CSS. This works perfectly fine in Safari, Firefox, and mostly in Chrome apart from one page, this one…

https://deslloydbehari.co.uk/information/

The page has a CSS gradient animation applied in the background, with the page background set to transparent in Gridder. The ‘overall site’ background is set to white in WP’s admin (Appearance > Customise > Background). If I do set the background to white for this particular page in Gridder it, of course, overrides the gradient animation. So I’m wondering if there’s a workaround for this? Could I set the background to white in Gridder, so Chrome recognises this, but still have the gradient animation ‘on top’ somehow? Perhaps using z-index?

The issue with ‘mix-blend-mode’ not working with transparent backgrounds in Chrome is well documented, but the latest updates do not seem to address this.

Ironically in Chrome for iOS, the gradient animation works perfectly with the fixed sitetitle and desktop style menu on mobiles! So I’m guessing there might be a fix?

Any help or pointers would be greatly appreciated.

Thanks, Des

[Richard]

Dear Des

@DLB

If you are applying the gradient to the body of your page then the only parent higher is the html.

Using:

html{
background-color:white;
}

Seems to work for me (the text changes with the gradient):

---

Hope this helps Des & have a wonderful day! 🌝

Richard

[DLB]

Thanks so much @Richard – much appreciated!

[Richard]

Thanks Des Have a wonderful day and best of luck with your website, it's looking great 💥🌝

---

Best wishes @DLB

Richard