Пользователь
0,0
рейтинг
4 февраля 2015 в 17:55

Разработка → Проблема диагональных бордеров и Firefox перевод

Недавно столкнулся с такой проблемой — верстал нестандартную рамку для картинок с помощью псевдо-элементов и бордеров и столкнулся с тем, что Firefox совершенно не справляется с сглаживанием линий (антиалиасинг) этих самых бордеров.

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

Демо проблемы

Mozilla Firefox — один из бразуеров, которые рендерят диагональные бордеры, используя антиалиасинг. И все было бы хорошо, если бы он применял его корректно, как делают другие браузеры (в том числе IE 9 и IE10). Но, к сожалению, получается не очень.

Первая проблема


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

Скажем, у вас такой вот треугольник на CSS:
div {
    border-top: 150px solid transparent;
    border-left: 150px solid red;
}

Такой код эквивалентен следующему, так как «transparent» это то же самое, что rgba(0, 0, 0, 0):
/* red = rgba(255,0,0,0) */

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

Но что мы видим?

image

Решение


Итак, чтобы код срабатывал корректно и в Firefox, нужно избегать использования значения «transparent», применяя заместо него соответствующий RGB цвет с нулевым альфа каналом.

Вторая проблема


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

Вот пример подобного разделителя:
div {
    border-top: 70px solid rgba(0, 255, 0, 0);
    border-left: 600px solid green;
}

image

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

Моё решение


В этой ситуации помогает довольно таки грязное решение, на которое я набрел: -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 — beta channel
  • Aurora 19.0a2 (2012-12-06)

Насколько я мог убедиться, эта проблема исправлена в Mozilla Firefox Nightly 20.0a1.

P.S. От переводчика: у меня на Ubuntu Firefox 35.0.1 первой проблемы нет, а во втором случае — ужасные зубцы, как, собственно и в моём кейсе. Второй фикс решает.
Перевод: Catalin Rosu
@alspaladin
карма
15,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (20)

  • 0
    Некорректное применение transparent — это общее место.
    Я встречал такую ошибку даже (только подумать!) у Lea Verou.
  • +1
    Спасибо, очень полезная статья. А то, что короткая — еще лучше.
  • +1
    Баг исправлен 2 года назад, если что.
    • +1
      У меня второй кейс живее всех живых с 35ой версией и на убунте и на маке. Первая же ссылка на демку позволяет убедиться в этом
      • 0
        Действительно, если сильно приблизить то можно увидеть небольшую разницу.

        Забавно, что scale(0.9999) добавляет ещё один однопиксельный бордер слева.
        • 0
          По моему, ничего приближать не нужно, разница налицо, сравните третий и четвертый треугольники
          image
          • +1
            Win 8.1, FF 38, ratio = 2

            ratio = 1
            • 0
              Значит, делаем вывод, что мак и линукс рендерят не так, как вин8, что тоже полезно знать и учитывать при вёрстке.
              • +1
                Мне кажется цена «учитывания», а то и исправления таких проблем слишком большая, а польза — слишком маленькая.

                Меня, например, бесит, как Chrome рендерит шрифты, а здесь я бы и не заметил ничего.

                А Firefox по-другому стал рисовать некоторые элементы, после того как я сменил производителя видеочипа (будь ты проклят, AMD).

                Не учитывать же всё это.
                • 0
                  Вообще, зависит от аудитории сайта и распределения по осям и браузерам. Но, конкретно в этом случае фикс настолько безхитростный и хак никак не задевает рабочие версии, что можно не переживать об этом совсем.
                  • 0
                    То есть однопиксельный бордер слева вас не волнует? :)
                    • +1
                      Машины с вин8 дома нет, поэтому посмотреть на это не могу. На маке и линуксе никакого бордера не возникает.
  • 0
    У IE, при работе с бордерами, есть схожая проблема.
    Берем блок, красим его в цвет и скругляем углы.
    Сделайте скриншот в IE и смотрите края этого блока. Этот «гений» рендеринга, с одной из сторон антиалиасинг присобачит. Получается, как бы рамочка, вместо однотонного цвета у блока, прибавляется пиксельная полосочка осветленного цвета…
  • 0
    Я очень извиняюсь, что не осталось образца… Но, в свое время, очень выбесил этот баг — www.youtube.com/watch?v=3jeDmXSJcQs
    Наблюдалось на FF36.
    • +3
      А меня бесят те, кто так делает меню. Убрал мышь с элемента — он пропал. С тачем не работает. Делайте нормальным способом.
      • –3
        Ваша правда, но потенциальный посетитель моих сайтов — домохозяйки, сидящие, порой, под IE6… *здесь я плачу кровавыми слезами*
    • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        Дело не в скорости обработки события. Firefox считает, что между меню и подменю есть свободное пространство в 1px, хотя, как вы видите, визуально его нет.
        • 0
          Ну так делайте в нахлёст, промежуток может запросто появится из-за погрешностей при масштабировании.
        • НЛО прилетело и опубликовало эту надпись здесь

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.