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