Transform scale () ошибка Safari при использовании на элементах с рамкой

Question

Функция CSS transform scale (), похоже, содержит ошибку в Safari, когда она используется для элементов с рамкой.

Я пытаюсь увеличить изображение при наведении мыши, используя функцию transform: scale (), ноесли изображение имеет границу, тогда оно масштабируется при масштабировании.Вот пример того же элемента с теми же правилами CSS (кроме границы):

Пример кода: https://jsfiddle.net/m6g4kw30/

div {
  text-align: center;
}

img {
  height: 100px;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  border: 1px solid #000;
  margin: 20px;
}

img.noborder {
  border: none;
}

img:hover {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(5);
  -moz-transform: scale(5);
  -ms-transform: scale(5);
  -o-transform: translateZ(0) scale(5);
  transform: translateZ(0) scale(5);
}

<div>
  <img src="https://via.placeholder.com/1000.png" alt="">
  <img src="https://via.placeholder.com/1000.png" class="noborder" alt="">
</div>

Answer 1

Функция CSS transform scale (), похоже, содержит ошибку в Safari, когда она используется с элементами с рамкой.

Вы можете сказать это снова! К сожалению, сообщения об ошибках, связанных с этими (и аналогичными) проблемами, возвращаются много лет, в большинстве случаев упоминается следующая ошибка:

• https://bugs.webkit.org/show_bug.cgi?id=27684 (открыт в 07/2009)

Если вы не уловили дату, это 10-летняя ошибка , которая все еще вызывает проблемы у разработчиков сегодня! YIKES .

По сути, проблема сводится к растеризации слоя в Safari. На transform/scale он изменяет размер слоя, однако не выполняет рендеринг растеризованного слоя. В вашем случае растровое изображение масштабируется, но текст / изображение размытые.

Как обойти / исправить? Есть несколько способов, которыми вы можете «обратиться» к этому:

1) Принудительное повторное рендеринг

Быстрое / простое исправление состоит в том, чтобы заставить Safari перерисовать ваш слой при преобразовании. Одним из способов достижения этого является применение свойства CSS, которое вы затем изменяете после преобразования (например, некоторые люди успешно меняют цвет фона). Для вашего конкретного случая использования мне повезло со следующей комбинацией:

img {
    outline: 1px solid #000;
    border: none;
}

img:hover {
    outline: none;
    border: 1px solid #000;
}

Переключая эти конкретные значения, я смог заставить Safari повторно визуализировать растеризованный слой, таким образом получая четкое изображение (аналогично примеру без границ). Вот пример JSFiddle с полным кодом: https://jsfiddle.net/gc56brfh/

2) Уменьшить, затем увеличить

Другой обходной путь, задокументированный здесь , - установить начальный размер элемента в «увеличенные» размеры, а затем уменьшить масштаб элемента, пока вы не будете готовы его масштабировать. Таким образом, элемент растрируется до правильных размеров.

CSS мудрый, это может выглядеть так:

img {
    -webkit-transform: translateZ(0) scale(0.2);
    height: 250px;
}

img:hover {
    -webkit-transform: translateZ(0) scale(1);
}

В приведенном выше примере мы установили initial размер img на 250px (это основано на вашем исходном css, с изображениями 50px, а затем увеличенными 5). Затем мы уменьшаем изображение на 0.2, в результате чего 50px. При наведении мы затем уменьшаем масштаб до 250px, устанавливая scale(1).

Вот обновленный JSFiddle: https://jsfiddle.net/df2zqgnx/

Следует отметить, что этот обходной путь может потребовать обновления других свойств CSS. Например, вы заметите в скрипте, что мне также необходимо обновить border с 1px до 5px, чтобы компенсировать уменьшение.

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