Прозрачный текст с тенью в Chrome

[afdw]

Всем привет!

Наткнулся я на странный баг в браузере Chrome (может есть и в других браузерах, но я заметил в этом). Вот суть бага: если сделать текст с тенью прозрачным цветом, то прозрачный цвет текста будет считаться не от фона, а от чёрного цвета. То есть как будто текст лежит на элементе с чёрным фоном. Вот пример. Без тени и без прозрачности всё ОК.

Чем можно объяснить такое поведение, может это вовсе и не баг, вы с этим сталкивались, и как это обойти?

Edited July 2, 2015 by afdw

[antonKar]

В FF всё также. Скорее всего какие-нибудь шаманства CSS, типа z-index в сочетании с opacity.

 

как это обойти?

 

http://jsfiddle.net/y9waxjk6/1/подойдёт? 

Edited July 2, 2015 by antonKar

[afdw]

подойдёт?

 

Тени не видно совсем.

 

 

В FF всё также. Скорее всего какие-нибудь шаманства CSS, типа z-index в сочетании с opacity.

 

Может это не баг, а просто очень странное поведение? 

Edited July 2, 2015 by afdw

[antonKar]

Тени не видно совсем.

Я её визуально и в шапке у вас не вижу по ссылке "без прозрачности".

 

Может это не баг, а просто очень странное поведение? 

Ага, шаманство. 

[afdw]

Я её визуально и в шапке у вас не вижу по ссылке "без прозрачности".

 

http://jsfiddle.net/3LuwhxLp/1/

[SelenIT]

Это не баг, всё по спецификации:

 

 

Unlike box-shadow, text shadows are not clipped to the shadowed shape and may show through if the text is partially-transparent.

В отличие от box-shadow, тени текста не обрезаются по контуру фигуры, отбрасывающей тень, и могут просвечивать, если текст частично прозрачен.

[afdw]

В отличие от box-shadow, тени текста не обрезаются по контуру фигуры, отбрасывающей тень, и могут просвечивать, если текст частично прозрачен.

 
Зачем нужно такое поведение?

[Николя223]

Именно поэтому можно делать вот так http://jsfiddle.net/y9waxjk6/2/

 

Есть background-clip: text , но лучше не стоит. нет поддержки у лисы. И вообще - нет в спецификации
Если вам что то подобное нужно - смотрите альтернативные варианты или действительно обычное opacity

[afdw]

http://jsfiddle.net/y9waxjk6/2/

 

-webkit-transition: .3s;

больше не нужен!