Блог

Главная - Вопросы по программированию - Firefox по-разному отображает элементы при применении translateY

Firefox по-разному отображает элементы при применении translateY

#css #firefox #transform #translate

#css #firefox #преобразование #перевести

Вопрос:

Применение translateY при наведении курсора мыши делает ссылку похожей на то, что она перемещается в сторону в Firefox (текущая версия). Это вызвано левым полем, применяемым с помощью em, и на самом деле это не перемещение пикселей, а просто рендеринг по-другому, что визуально выглядит как перемещение. У Chrome нет проблем.

Вот пример страницы:

 .icon-button-user-action-base {
  text-decoration: none !important;
  margin-left: 0.2em;
}

.icon-button-user-action-base:hover i {
  transform: translateY(-8px);
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

<a href="#" class="icon-button-user-action-base" style="font-size: 83px;">
  <i class="far fa-square"></i>
</a>
<div style="position: absolute; left: 98px; top: 0; height: 100%; width: 100px; background-color: blue;">

</div>

Пример рендеринга с наведением курсора мыши и без него

Есть идеи о том, как это исправить, не меняя поля на пиксели?

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

1. запуск вашего фрагмента с Chrome и FF не показывает разницы, есть ли весь код, необходимый для демонстрации проблемы?

2. Не могу воспроизвести здесь ни на macOS с дисплеем retina, но действительно очень правдоподобно, что при использовании em вы фактически попадаете в координаты с плавающей точкой (16,6 пикселей) и что принудительный рендеринг GPU с помощью transform отображает его иначе, чем при отсутствии преобразования (например, программный рендеринг всегда округляет объекты, в то время как графический рендеринг использует сглаживание вместо этого). (FWIW на моей машине у меня всегда включено сглаживание)

3. Откройте эту страницу в Firefox, в моем примере нажмите «Развернуть фрагмент», а затем «Запустить фрагмент кода», тогда вы увидите это очень четко. Или просто создайте простую html-страницу, добавив стили и HTML-код (к сожалению, вырезанный stackoverflow).

4. @Kaiido Я тестирую на одном компьютере с Firefox и Chrome, проблема только в FF. Похоже, что проблему вызывает механизм рендеринга с помощью FF, а не аппаратное сглаживание. Также движение, как правило, не должно изменять способ отображения прямых линий.

5. Без преобразования браузер может использовать программный рендеринг на вашем компьютере (на моем он постоянно использует графический процессор). Этот программный рендеринг округляет координаты и, таким образом, выглядит четче . С другой стороны, рендеринг GPU не будет округлять координаты, но создаст сглаживание. Когда вы добавляете правило преобразования , браузер переключается с программного рендеринга на графический рендеринг. Вот почему у вас есть строка, когда правило активно: сглаживание отобразит разрыв в 0,4 пикселя, используя полупрозрачные пиксели. Обратите внимание, что на моей машине я всегда вижу этот пробел. Решение заключается в использовании целочисленных координат (т. Е. пикселей).