Как исправить баг с opacity и ссылками в firefox? И баг ли это?

Question

[Иван Поликарпов]

Столкнулся со странным поведением opacity в FF.
Есть таблица, в таблице ряды. Часть рядов с классом not-available

table tr.not-available {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

В ячейках ряда есть ссылки-иконки.
Выглядит вот так:

Так вот, в полупрозрачных рядах в FF эти ссылки не кликаются и курсор не меняется при наведении. В Safari все нормально.
Кто-нибудь сталкивался?

P.S. Кроссбраузерность не супер-актуальна, т.к. это внутренняя админка одного из своих проектов, но я привык работать с ней в FF, а тут такая подстава.

Comments

[Lynn «Кофеман»]

Там точно никаких других правил нет. Или каких-нибудь лишних элементов?

Answer 1

[Руслан Абдуллаев]

opacity меньше 1, воспринимается, как z-index: 0. У вас ссылки оказываются ниже остального контента

Comments

[Иван Поликарпов]

Да, похоже на правду!
Буду ковыряться с z-index, спасибо!

[Евгений Петров]

Разве opacity со значением, меньшем 1, не формирует свой stacking context?

[Руслан Абдуллаев]

Евгений Петров: формируют согласно спеки по следующим правилам:
"Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created."
www.w3.org/TR/css3-color/#transparency

[Иван Поликарпов]

Проще всего оказалось сделать ячейку с кнопками без opacity:

table tr.not-available td:not(.operations) {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}

[Евгений Петров]

Спасибо. Нужно ещё раз перечитать тему контекстов.

[Иван Поликарпов]

Всё, разобрался до конца.
Ячейчка с кнопками была row-span="2". После применения opacity второй ряд по z-index становился выше чем первый, или что-то в этом роде. Переделал формирование таблицы без row-span и все заработало нормально без манипуляций с z-index.