Bug 118836 – text-overflow ellipsis shadow is different from rest of the text

• Status: NEW
• Component: CSS

[Terry Vogelaar]

It is annoying that in Safari/Chrome the ellipsis is treated differently from the normal text if I have this CSS: 
.txt { 
text-shadow: 10px 10px 1px #000;
text-overflow: ellipsis; overflow: hidden; 
display: block; 
width: 100px; /* too small for the whole text, so the ellipsis shows */ 
color: rgba(255,0,0,0.2); 
}

You'll see that the ellipsis in the drop shadow is almost transparent just like the actual (red) text, while the rest of the text in the drop shadow is 100% opaque.

Firefox is doing fine here.

(In reply to comment #0)
> It is annoying that in Safari/Chrome the ellipsis is treated differently from the normal text if I have this CSS: 
> .txt { 
> text-shadow: 10px 10px 1px #000;
> text-overflow: ellipsis; overflow: hidden; 
> display: block; 
> width: 100px; /* too small for the whole text, so the ellipsis shows */ 
> color: rgba(255,0,0,0.2); 
> }
> 
> You'll see that the ellipsis in the drop shadow is almost transparent just like the actual (red) text, while the rest of the text in the drop shadow is 100% opaque.
> 
> Firefox is doing fine here.

Please add an html file which shows the issue clearly.

[Radar WebKit Bug Importer]

<rdar://problem/14986735>

[Jon Lee]

Created attachment 211566 [details]
Test case

(In reply to comment #3)
> Created an attachment (id=211566) [details]
> Test case

For the attached test case same behaviour is observed on firefox, chrome and safari.
Can you please confirm so that we can close this bug.

[Jon Lee]

This is not the case. In Firefox I see that the ellipsis is rendered solid black. (The test case for me did not use the custom font, so you see the whole sentence. You need to edit the test case to be longer to see the ellipsis.)

[Karl Dubost]

Created attachment 459993 [details]
rendering in Safari, firefox, chrome

only Safari doesn't show the ellipsis in solid black.