Incorrect CSS

Hi BSS Team,

I posted this in how to but Printninja suggested to post it here so it is as follows below, but link to original post & issue screenshot are at top.

Original post =

Issue Screenshot =

Issue Screenshot (temp) =

<hr />

I have made a text fill effect with css. It works fine on my WAMP server. However this line of css (and I’ve noticed others at times) does not render & has the red line through it.

-webkit-background-clip: text;

Why does this happen in BSS?

The code is correct, like I said, it runs properly on WAMP and live server.

It seems to be the word “text“. if I use the “padding-box” or “border-box” it’s fine (but doesn't achieve what I want). I have the latest version of BSS(5.3.0).


Thank you for the report and screenshots! Because Bootstrap Studio is built with Electron, it shares the same logic as Google Chrome for validating whether a CSS rule is valid or not. If you write -webkit-background-clip: text; in Chrome's Dev Tools, it's presented with a strike through while -webkit-background-clip: padding-box; is not. So this must be an issue with Chrome's CSS validation logic, which would likely be fixed in a future update.

Regardless of the red strikethrough, the rule does work and affects the element. You can just ignore the red strike through for now.

Hi Martin thanks for replying,

yes it does effect the element but doesn't render the image in BSS, it just fills the text with what ever "color" you select for the font, so it looks nothing like my live version here

My live version also looks fine in Chrome just not in BSS.

Google broke with Safari webkit and went to Blink (I assume this is the Chrome version used by BSS). I think there is still issue # 5 open to allow text as a option per the upcoming spec.

Might be where the issue lies ?