Background Overlay Transparency is different on Firefox

@maxframefelix

https://codepen.io/tugbucket/pen/wvxBQdW

I stripped down your HTML to just the 2 elements you need for the effect and it does work in FF. I’m not 100% sure what the conflicting HTML/CSS on your site is though. I’ll look back it more when I get a sec but maybe the simplified codepen above can help point you in the right direction. It’s a cool effect and I’m curious as well.

@maxframefelix \

So looking at it more, it does work for a few seconds and then stops. So I’m guessing it’s something in one the the many JS files doing it but haven’t figured out which it is.

@tugbucket thank your for your help! As im looking at the CSS couldn`t it be possible, that Firefox just use the opacity:1 not only for the background, but for the picture (the red dot), too? And if so, is there a possibility to change the CSS, so i can set the opacity for both individually?

@maxframefelix

https://stackoverflow.com/questions/67481893/firefox-mix-blend-mode-bug-on-video-mac

set the opacity of the video container, in this case the div .elementor-background-video-container to opacity: .98
I tested locally and seems to work.

I set the opacity to.98 but then it`s still barely possible to see the video preview in the dot ( https://we.tl/t-1oJx0gigz2 ). I would have to set the background overlay opacity to 0.7 but then the opacity of the background overlay color also goes down Screenshot: https://we.tl/t-30RR3nkFtz Why does Firefox connect the opacity of the background overlay color AND the the background overlay .png but the other browsers only for the color? This is how its looking on the other browsers: https://we.tl/t-4kxQcDrSFc

.elementor .elementor-background-video-container {
opacity: .98 !important;
}

add that and see. Seems to work for me.

It worked ?? Thank you so much!!! Hope you had a good New year ?? Thanks again