<rmcreative>

RSS

Лишний 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 и раньше чудил с отрисовкой треугольничков. Ту багу поправили, появилась новая:

Firefox CSS slant bug

Серый 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:

UPD: в 2016 это исправили.

Комментарии RSS

  1. №7269
    Alexey
    Alexey 20 дек. 2012 г., 6:47:08

    А в какой версии FF? Только что посмотрел пример в jsfiddle -- никаких артефактов нету (FF 17.0.1 MacOS).

  2. №7271
    Sam
    Sam 20 дек. 2012 г., 13:44:46

    Та же версия, но под Windows.

  3. №7274
    Alexey
    Alexey 20 дек. 2012 г., 14:04:13

    Аеее. Повторилось. Debian 20.0a1 (2012-12-17) Попахивает багом.

  4. №7276
    Sam
    Sam 20 дек. 2012 г., 14:22:34

    Alexey, хватит сил отрепортить или мне?

  5. №7277
    Alexey
    Alexey 20 дек. 2012 г., 14:29:49

    Лучше сам. Могу сделать скриншоты в макоси чтобы прикрепить. Если надо будет -- напиши на почту

  6. №7278
    Alex
    Alex 20 дек. 2012 г., 14:32:57

    Confirmed: Gentoo, FF 17.0.1

  7. №7284
    Sam
    Sam 20 дек. 2012 г., 17:00:28

    Баги уже в трекере, обновил пост.

  8. №7288
    MT
    MT 20 дек. 2012 г., 20:48:03

    FF и раньше чудил с отрисовкой треугольничков. Ту багу поправили

    Когда поправили? В последних Firefox Beta (18.0b1) и Nightly (20a1, 20121220030912) вместо треугольников по-прежнему размытые пятна

    Эта техника просто непригодна для использования. А учитывая количество необходимого CSS-кода, маленькие треугольники можно, практически ничего не теряя, реализовывать как Data-URI-графику и получать pixel-perfect-результат.

  9. №7289
    MT
    MT 20 дек. 2012 г., 20:52:42

    P. S. Предлагаю обнулить отступ у последнего элемента в цитатах в комментариях:

    .comments BLOCKQUOTE > :last-child {
        margin-bottom: 0;
    }
    
    
  10. №7290
    Sam
    Sam 20 дек. 2012 г., 21:58:57

    MT, спасибо. Так и правда приятней.

  11. №7292
    Максим
    Максим 21 дек. 2012 г., 2:04:34

    Эм, может outline глючит ?

  12. №7715
    SelenIT
    SelenIT 20 марта 2013 г., 15:10:15

    Логика в этом есть: transparent — это сокращенная запись для rgba(0,0,0,0), т.е. прозрачного черного. А Fx пытается нарисовать стык границ с субпиксельным сглаживанием на манер градиента. А за -moz-border-top-colors: transparent спасибо, не знал!

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.