CODEWITHSUNDEEP
javascriptcssfirefoxpolyfills
Spedwards
Spedwards

Reputation: 4492

"background-clip:text" has weird behaviour

I am using a page that is using the css of -webkit-background-clip:text with a polyfill to get it working in browsers that don't support this.

Obviously, some browsers use Webkit (Chrome, Opera & Safari) and some don't (Firefox, IE), and I want the page to display the same (give or take the background clip) however this isn't happening on Firefox. The polyfill I'm using works but translates the text very weirdly in Firefox. Strangely enough, IE works (though the polyfill doesn't).

This is Firefox: enter image description here

This is a Webkit browser: enter image description here

And finally this is IE: enter image description here

The polyfill I'm using is https://github.com/TimPietrusky/background-clip-text-polyfill

I've tried contacting the guy who made it but can't get any reply out of him.

Basically, I have no idea why Firefox is translating the text at all. I want it to either act as Internet Explorer and just display the text as white, or correctly display it.

How would I go about doing that?

If you need a page to work off, there is too much for a jsfiddle, but a link to the page can be found here.

Upvotes: 0

Views: 594

Answers (1)

leo
leo

Reputation: 8520

Your polyfill creates a SVG for Firefox, but doesn't seem to do a very good job at it. Removing overflow: hidden from the SVG element (set in svg.css) will let all the generated SVG show.

Upvotes: 1

Related Questions