Header firefox without colour

[Uslu]

Hello support team,

Unfortunately, our header changes colour in Firefox. We don’t have this problem in the Chrome browser or the Edge browser. Only in the Firefox browser it loses its colour black.

Here is our link:

cleversystem.de

I ask for urgent help!

Thanks in advance.

[marc_a]

Hi Caglar,

Thanks for reaching out!

I compare your header in Google Chrome and Firefox and they are just the same. Maybe it is just a cache on your Firefox browser, I suggest that you clear your browser cache in firefox.

Google Chrome

Firefox

Hope that helps.

Thank you.

[Uslu]

Hello @marc_a,

thanks for the quick feedback

When you scroll down there is a black bar with a navigation and the logo on chrome.

On firefox when you scroll down the bar is white and the logo and navigation bar is not visible anymore.

I’m sorry, it was my mistake. I didn’t explain it well

Thanks

[prakash_s]

Hello Caglar,

I checked your site in both Google Chrome and Mozilla Firefox it seems that the Header background color on the scroll is working fine. Please have a look at the screenshot given in the secure note.

I have tested on the Google Chrome Version 90.0.4430.212 and Mozilla Firefox Version 88.0.1. Please let us know which version are you using. Please make sure you are not using any browser extension that is stoping the CSS or JS to load.

Thanks

[Uslu]

Hello prakash_s Prakash Singh is a moderator

I have the current Firefox version 88.0.1 (64-bit). I have received many customer complaints already. Can you please help me urgently how to solve the problem ?

Thank you very much in advance.
Caglar Uslu

[christian]

Hey Caglar,

I have replicated the issue in Windows 10. Prakash used Windows 7.

The issue happens because Firefox does the backdrop filter property you’re using is not supported in Firefox. And, your background is transparent with Mix Blend Mode of Screen.

This is not an issue with Pro but the properties you’re using. You need to set the color of your header other than pure black. And, the Mix Blend Mode should be Multiply. The following screenshot is the result.

Hope that helps.

[Uslu]

Hello Chistian,

where can I set this ?

Can you help me please?

Thanks in advance

[tristup]

Hi Caglar,

My colleague is correctly said that you need to set the Mix Blend attribute value to multiply, darken, difference, or normal. I would suggest you modify the custom CSS code in the Element CSS of the specific Bar and add the following.

 mix-blend-mode: multiply;

The code should look like:

.$el.x-bar {
    height: 6em;
    font-size: 20px;
    background-color: rgb(0,0,0);
    z-index: 9999;
    mix-blend-mode: multiply;
    -webkit-backdrop-filter: invert(100%);
    backdrop-filter: invert(100%);
    transition-timing-function: cubic-bezier(0.400,0.000,0.200,1.000);
}

Hope it helps.
Thanks

[Uslu]

Hello tristup

many many thanks

It worked :))

I am very happy. Thank you…

You are the best

[tristup]

Hi Caglar,

Really happy to help you.

Thanks