Incorrect CSS

Bootstrap Studio Help
1

Hi guys 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.

I have had a read in css search but couldn't find similar, so sorry if it's already answered.

2

Hi guys 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.

I have had a read in css search but couldn’t find similar, so sorry if it’s already answered.

Below is the live version of what I want to do in BSS. In BSS it just fills up and down with white fill.

http://www.nailit.nz/CSS%20TESTS/Animated%20Water%20Text/index.php

3

This is a good question. I can find no reason for the red line.

I reproduced the example here https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip in BSS and it displayed correctly.

4

Wow, you certainly did reproduce the example, awesome. Thanks very much for going to this much trouble.

5

Hi Printninja,

I have no idea why this is happening. I had come across the Mozilla link you posted I have also copied the "-webkit-background-clip: text;" and pasted it in & still I get the red line. It seems to be the word "text". if I use the "padding-box" or "border-box" it's fine. I have the latest version of BSS(5.3.0).

Below is a link to a screenshot of my BSS code the image at the top called "bss_css_issue .jpg" Also the link to the above live file in case I messed up while changing the folder it has the screenshot too, but for anyone else in the future the mega link will stay up a while longer.

https://mega.nz/file/KCp31JIA#N25hIaXUCMSwN6XXat_otB5cl7ilEslUTRdbspkP0y8

http://www.nailit.nz/CSS%20TESTS/Animated%20Water%20Text/index.php

6

@Timespider

Neither one of your links seem to be working.

I tried another experiment where I created a custom code block and entered the following... <style> p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; }</p> <p>.border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; }</p> <p>.text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } </style></p> <p>The background extends behind the border.</p> <p>The background extends to the inside edge of the border.</p> <p>The background extends only to the edge of the content box.</p> <p>The background is clipped to the foreground text.</p> <p>

Everything displayed as it should have in a browser preview. BSS had no issues with the -webkit-background-clip: text; in the custom code (no red line.)

I think the red line may just be a bug, so probably you should post this in the bug report section.

7

Thanks for helping Printninja, I appreciate it.

I will post it in the bug section.

Cheers