Статьи

Диагональные границы CSS по-прежнему неправильно отображаются в Firefox

Сентябрь 26, 2018

Название в значительной степени говорит обо всем. В эти дни я работал над небольшим веб-проектом и, создавая столь известный эффект треугольника с использованием границ CSS, я заметил некоторые несоответствия рендеринга в Firefox, я думал, что они уже исправлены.

CSS граничит с Firefox

Посмотреть демо

Firefox в Mozilla — один из браузеров, использующих сглаживание для диагональных границ CSS. Но нет никакой проблемы с сглаживанием для диагональных границ, если рендеринг сделан соответственно. IE9 и IE10, другие браузеры, которые используют сглаживание, делают это правильно, но, к сожалению, в настоящее время Firefox этого не делает.

Первый выпуск

Я недавно прочитал и написал в Твиттере хорошую статью Криса Моргана, где он объясняет, как и почему CSS «прозрачный» может быть не прозрачным , особенно на диагональных границах.

Допустим, у вас есть следующий CSS-треугольник:

div {
	border-top: 150px solid transparent;
	border-left: 150px solid red;
}

Это эквивалентно:

/* red = rgba(255, 0, 0) */

div {
	border-top: 150px solid rgba(255,0,0,0);
	border-left: 150px solid red;
}

CSS граничит с Firefox - прозрачно против RGBA

Временное решение

Таким образом, чтобы он хорошо работал и в Firefox, вам нужно избегать использования transparentзначения и использовать вместо него соответствующий RGBцвет alpha = 0.

Совет CSS

transparentЗначение эквивалентно rgba(0, 0, 0, 0).

Второй выпуск

В моем небольшом проекте, о котором я говорил ранее, я использую абстрактный разделитель блоков, созданный с помощью CSS-треугольника. Дело в том, что мой блок довольно большой, так как он предназначен для разбиения двух разделов сайта.

Вот пример блока-разделителя:

div {
    border-top: 70px solid rgba(0, 255, 0, 0);
    border-left: 600px solid green;
}

CSS границы на Firefox - большой пример границы

Если вы используете Firefox, вы можете заметить размытый переход по диагонали, вызванный сглаживанием. Это довольно раздражает, и трюк с RGBA не решает проблему.

Мой обходной путь

Что делает это грязное временное решение , я обнаружил, играя с ним: -moz-transform: scale(.9999). Очевидно, применяется небольшое масштабирование, но визуально вы не увидите разницу. Кроме того, технически вам не понадобится префикс для этого преобразования, поскольку Firefox поддерживает его без префикса начиная с версии 16 .

Но, поскольку это только взлом Firefox, я думаю, использование префиксной версии — хорошая идея.

div {
    border-top: 70px solid rgba(0, 255, 0, 0);
    border-left: 600px solid green;
    -moz-transform: scale(.9999);
}

Тестирование Firefox

Плохое поведение на:

  • Mozilla Firefox 17.0.1
  • Mozilla Firefox 18.0 — бета-канал
  • Аврора 19.0a2 (2012-12-06)

Насколько я тестировал, похоже, что это поведение исправлено в Mozilla Firefox Nightly 20.0a1. Так что это действительно хорошая новость, даже если нам придется немного подождать, пока релиз Mozilla Firefox выйдет в этой версии.

Посмотреть демо

это оно

Если вы похожи на меня и нравитесь всем этим мелочам в CSS, то вам понравится эта статья. Не стесняйтесь оставлять комментарии и спасибо за чтение!

32
Share: