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.
<rdar://problem/14986735>
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.
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.)
Created attachment 459993 [details] rendering in Safari, firefox, chrome only Safari doesn't show the ellipsis in solid black.