<rmcreative>

RSS

Все заметки с тегами «bug, Firefox, slant»

Можно уточнить:

    (1)
    (1)
  1. Лишний 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 это исправили.

    12 комментариев