Background fixed not working in firefox

[Maurice]

Hi together,

I have a problem with background-attachment fixed in combination with background-clip text within Firefox.
The screenshot below shows the correct version in chrome:

And the following screenshot shows the bug in Firefox:

This is my used CSS for the effect:

.hero-h1, .h2-transparent {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text; }

I noticed that if I remove the background-attachment fixed property Firefox will display it correctly, but then the whole effect goes lost.

Here is the link to the live site.

[vincent (Vincent Bidaux)]

So there are 2 issues: fixed bg and clipping not working.

For the fix bg, I can’t reproduce it, it works fine in my Firefox.

For the clipping, you’re only using the code for webkit. Chrome and Safari use webkit, but not Firefox.

You need an extra line of code.

.hero-h1, .h2-transparent {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text; }

[Maurice]

Hi @vincent,

ok, so I can´t combine fixed bg with clipping bg?

@vincent

.hero-h1, .h2-transparent {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text; }

But this won´t work with background image fixed, too.

[vincent (Vincent Bidaux)]

Yes you can, I didn’t say you can’t. I said I can’t see the fixed bg issue in firefox, to me it works.

The code I gave you should fix the clipping in firefox. As for the fixed bg in ffox I d’ont know, to me it works already…

[Maurice]

@vincent

I said I can’t see the fixed bg issue in Firefox, to me it works.

Here you can see that I´ve included the code snippet and nevertheless it displays wrong.

[vincent (Vincent Bidaux)]

Add color:transparent; too

[Maurice]

@vincent

Add color:transparent; too

Unfortunately this takes no effect, too.

[vincent (Vincent Bidaux)]

Hi!

Do you mind sharing your site’s read-only link please?

1 - On your site’s dashboard, click the Share icon:

http://vincent.polenordstudio.fr/snap/nqmwm.jpg

2 - Generate and Copy the link:

http://vincent.polenordstudio.fr/snap/gpto0.jpg

3 - Then edit your post here, and paste the link inside.

[Maurice]

Here is the Read-Only of the page.

[vincent (Vincent Bidaux)]

where’s the custom code?

[Maurice]

@vincent

where’s the custom code?

In the custom code field under the project settings, because its global.

Below is the exact CSS that is in the custom code field.

.hero-h1, .h2-transparent {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
background-color: transparent;}

[vincent (Vincent Bidaux)]

Ok, so I can’t act on it because I can’t reach it.

What you should do:

Adding custom CSS code INSIDE the page is better. Because you can see the effects right in the designer.

To make it site wide, place your custom code element inside of the Navbar symbol.

See what I mean?

Can you remove your custom code from page and site level and add it as I described? It will be better both for you to work more efficiently, and for me to help you.

[Maurice]

@vincent

Ok, so I can’t act on it because I can’t reach it.

You could manipulate the CSS with Firefox Developer Tools.

@vincent

Adding custom CSS code INSIDE the page is better. Because you can see the effects right in the designer.

This is completely new to me. As I know Webflow renders custom code only on published pages.

@vincent

Can you remove your custom code from page and site level and add it as I described? It will be better both for you to work more efficiently, and for me to help you.

At the moment this is no option, because I would have to paste the code snippet in every single page.

[vincent (Vincent Bidaux)]

@Maurice

At the moment this is no option, because I would have to paste the code snippet in every single page.

Not if you put it inside of the Navbar symbol, as I was saying. The symbol is already on every page.

[Maurice]

@vincent

Not if you put it inside of the Navbar symbol, as I was saying. The symbol is already on every page.

Ok, I changed the setup as you said.

[Maurice]

Hi @vincent,

I did what you said, but it still not working in Firefox. Could you take another look at it, please?