Mix-Blend-Mode for .sitetitle and .menu-item

[felix_rabe]

You might need a white background for it to work. For example a white jpeg or set your body / grid background to white via css.

[edgrbnz]

Body background is set to white in Customize / Background. If I switch on the menu bar in Customize / Menu Style / Menu Bar and set it to white the text shows up in chrome.
Otherwise it’s just white on white… it seems like chrome doesn’t register the body background?
I wonder why?

---

(Edit 20/06/26)
I also tried to apply the mix-blend-mode to the carousel numbers (which are set to On top of Carousel) with the following code:

.lay-carousel-sink .numbers {
	color: white;
	mix-blend-mode: difference;
}

That also didn’t work… seems to me I’m just doing something wrong – If anyone knows…

[edgrbnz]

I got this to work In Safari in Firefox.
I uploaded a quick test over here → Pass: Error

The CSS is as follows:

nav.primary,
.sitetitle,
.lay-carousel-sink-parent {
	mix-blend-mode: exclusion;
}

.numbers._H5 {
	color: white;
}

This doesn’t really work in Chrome. It only works as soon as there are changes in the background color. I also tried to apply a white background color via CSS to the .body but Chrome doesn’t seem to register the background color of the site.

There seems to be an existing Chrome bug for this, as stated here (scroll ↓ a bit).

Perhaps @mariusjopen or @arminunruh know something about this?
Any help would be very much appreciated!

[edgrbnz]

Want to give this a slight push…
If anyone knows some handy trick regarding my questions i’d be very very thankful!

[mariusjopen]

Dear @edgrbnz
yes. Blending modes are different for each browser. Not really developed yet.
Not so much fun.

Best!
Marius

[edgrbnz]

Hi @mariusjopen !
Thanks for your reply!
Yes I know it’s kinda experimental. I was planning to add some Fallback via @supports (mix-blend-mode: exclusion) {…}
So your advice would be to just leave it behind and find a different solution?
Which would be sad but ok.

But if you have the time here’s some food for thought:

As soon as I set a background color (also white!) for a row it also works in Chrome. Since I cannot set a color for Row Gutters this work-around won’t really cut it.

It looks like it is fixable since only Chrome doesn’t want to register the overall set background color of the LayTheme Website for the exclusion. I guess it would be a small tweak and has something to do with the transitions and/or opacities for backgrounds – I’m just unable to find out what it is.

If you check the password-prompt page in Chrome you can see that it works fine. If you login now (pass: Error) you can see that it works with a white row background (scroll down a bit).

So my guess is that it has something to do with the way the overall background for Lay is rendered…

[edgrbnz]

If anyone is trying a similar thing with their site – I kinda managed to get it to work:

I was able to “fix” this by applying the background color white again in the gridder for every page: This make mix-blend-mode: exclusion; work in every (tested) browser.

---

Although I’m happy that it works I would much prefer to also have it work with the generally set background color for the whole site:

I guess that the one background-color gets applied to a different <div> than the other. I’m not quite sure why that happens as it always means the whole background of the given site.

Would be cool to have this simplified if possible.

Cheers!

[Richard]

Dear @edgrbnz

Once again you are a Lay Theme Warrior!!
Thank you for finding a crack to this problem

I will save this as option for development in the future,
that there be a simpler option for this as you mentioned

Thank you Lay Theme Warrior

Best wishes
Rich

[edgrbnz]

Thank you for making this theme and considering this for future dev!

💐💐💐

[DLB]

This post is deleted!