Лишний border у треугольников в Firefox
20 декабря 2012
Часто для того, чтобы изобразить треугольник на CSS использют технику slants. То есть элемент в 0px
шириной и высотой c тремя border
приличной ширины и одним нулевым. В этом блоге так оформлены уголочки у количества комментариев к постам на главной. Типичный код для этого выглядит так:
.triangle { width: 0; height: 0; border-top: 0; border-bottom: 60px solid #fee; border-left: 40px solid transparent; border-right: 40px solid transparent; }
FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:
Серый border
в один пиксель тут явно лишний. Ни в одном другом браузере его нет.
Методом проб и ошибок поправил, но логики за всем этим так и не разглядел. Рабочий вариант без артефактов:
.triangle { width: 0; height: 0; border-top: 0; border-bottom: 60px solid #fee; border-left: 40px solid rgba(255, 255, 255, 0); border-right: 40px solid rgba(255, 255, 255, 0); }
UPD: вместо rgba можно использовать -moz-border-top-colors: transparent;
.
Проявляется только в Windows и Linux.
Баги в трекере mozilla:
- https://bugzilla.mozilla.org/show_bug.cgi?id=644104
- https://bugzilla.mozilla.org/show_bug.cgi?id=646053
UPD: в 2016 это исправили.
Комментарии RSS по email OK
А в какой версии FF? Только что посмотрел пример в jsfiddle -- никаких артефактов нету (FF 17.0.1 MacOS).
Та же версия, но под Windows.
Аеее. Повторилось. Debian 20.0a1 (2012-12-17) Попахивает багом.
Alexey, хватит сил отрепортить или мне?
Лучше сам. Могу сделать скриншоты в макоси чтобы прикрепить. Если надо будет -- напиши на почту
Confirmed: Gentoo, FF 17.0.1
Баги уже в трекере, обновил пост.
Когда поправили? В последних Firefox Beta (18.0b1) и Nightly (20a1, 20121220030912) вместо треугольников по-прежнему размытые пятна
Эта техника просто непригодна для использования. А учитывая количество необходимого CSS-кода, маленькие треугольники можно, практически ничего не теряя, реализовывать как Data-URI-графику и получать pixel-perfect-результат.
P. S. Предлагаю обнулить отступ у последнего элемента в цитатах в комментариях:
MT, спасибо. Так и правда приятней.
Эм, может outline глючит ?
Логика в этом есть:
transparent
— это сокращенная запись дляrgba(0,0,0,0)
, т.е. прозрачного черного. А Fx пытается нарисовать стык границ с субпиксельным сглаживанием на манер градиента. А за-moz-border-top-colors: transparent
спасибо, не знал!