Chrome – sitetitle and menu / nav
-
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
-
Dear Des
@DLB
If you are applying the gradient to the
body
of your page then the only parent higher is thehtml
.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
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it