Chrome text shadow showing when set to 0

Question

So, I am in the process of creating a website designer, and I came across something strange, if you set text-shadow: 0 0 0 someColor to the element that the shadow actually applies to, I made a violin, where it is very clear here FIDDLE .

This is mistake?

Answer 1

It is not a mistake that this is not an incorrect implementation of the specification; spec implies that the shadow is generated until the calculated value is something other than none . The only values ​​that can be calculated for none are none or initial .

Text shadows are drawn similar to box shadows. Because of this, most of the behavior of text shadows follows the specification for shadow fields . Nowhere in any specification does it indicate that a value with all zeros should not generate shadow. All this suggests that any property can take one of two possible values: none or a comma-separated list of one or more groups of <shadow> values, each of which corresponds to a set of values: in the case of text-shadow , it [ <length>{2,3} && <color>? ]# [ <length>{2,3} && <color>? ]# as stated in its own specification . As long as you have a value that is not equal to none , either spec assumes that the shadow will be drawn and sets all the behavior based on this assumption.

For both properties, even if you do not specify a color, both qualifiers indicate that currentColor should be used (it says in prose that it is "taken from the color property" or "the resulting color is ink, that it is shadow," the result is in the currentColor code).

Since the shadow is always drawn for a value other than none , and zero lengths lead to a shadow that is exactly the same size as the text, what happens here is probably the result of composing two or more layers of translucent pixels due to smoothing glyphs, as well as shadows (as indicated in the comments). This applies not only to text shadows, but also to box shadows, an archetypal example of which is a field with rounded corners , where only hints of smoothing at the rounded corners themselves are indicated, and not at the straight edges of the box. This also happens in all browsers, at least based on testing and previous experiences.

For all that, if you absolutely cannot accept none as a value, you can always specify transparent for the color. The shadow will still be drawn, but since it is completely transparent, you will not see it .

Answer 2

If you want to remove the text shadow, I suggest setting text-shadow: none;

 text-shadow:none; 

Answer 3

Optional. This is the value. If not specified, the default value is 0. The higher this value, the greater the blur; the shadow becomes wider and lighter.

The blur property does not indicate blur when set to zero. https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

Answer 4

text-shadow: 0px 0px 0px #FFFFFF; These properties are not for hide or show. move the shadow up, move the shadow to the right to the left, and the blur level 0 will be clean.

if you want to hide Shadow Then: Write "text-shadow :;" but do not set any value, it must be empty.

sorry for bad english :)

Answer 5

If you are building a page builder and want the initial "empty" values ​​(which they are not empty, the first two zeros indicate positioning and the last blur), you can simply set the color as the default value to the background color of the element. Or you can change the blur value to -1.

 text-shadow: 0 0 -1px red; 

Another option I can imagine is to include them in the text shadow, and then add red to your 0 0 0 using the if else statement. Pseudocode:

 if text-shadow option is checked use text-shadow:0 0 0 red; else use text-shadow:none; 

Good luck.