Как заставить рендеринг после 3D-преобразования WebKit в Safari

Question

Я использую CSS 3D-преобразования для увеличения div, например:

-webkit-transform: scale3d(2,2,1);

Само масштабирование прекрасно работает в любом браузере WebKit. Однако при использовании этого в Safari (для мобильных устройств или Windows) содержимое div не отображается повторно. В результате содержимое масштабируется после масштабирования.

Этот эффект возникает только при использовании 3D-преобразований. Все отлично работает при использовании

-webkit-transform: scale(2);.

Чтобы использовать аппаратное ускорение на iPhone / iPad, было бы неплохо использовать 3D-преобразования.

Кто-нибудь знает, как сказать Safari перерисовать div с новой шкалой?

Answer 1

Причина, по которой текст размыт, заключается в том, что Webkit рассматривает текст как изображение, я думаю, это цена аппаратного ускорения.Я предполагаю, что вы используете переходы или ключевые кадры анимации в своем пользовательском интерфейсе, в противном случае прирост производительности незначителен, и вам следует переключиться на не-3d преобразования.

Вы можете либо:

• ДобавитьEventlistener для transitionend, а затем замените 3d-преобразование для стандартного преобразования, такого как ...

element.addEventListener("transitionend", function() {
  element.style.webkitTransform = 'scale(2,2)'
},false);

• Поскольку Webkit обрабатывает вещи как изображение, лучше начать с большого и уменьшать масштаб.Итак, напишите свой CSS в своем «конечном состоянии» и уменьшите его до нормального состояния ...

 #div {
  width: 200px; /*double of what you really need*/
  height: 200px; /*double of what you really need*/
  webkit-transform: scale3d(0.5, 0.5, 1);
}

 #div:hover {
  webkit-transform: scale3d(1, 1, 1);
}

И вы получите хрустящий текст при наведении курсора.Я сделал демо здесь (работает на iOS тоже):

http://duopixel.com/stack/scale.html

Answer 2

Я обнаружил, когда пытался перерисовать div в safari по другим причинам (пересчет переполнения текста при наведении курсора), это просто:

selector {
    /* your rules here */
}
selector:hover {
    /* your rules here */
}
selector:hover:after {
    content:"";
}

Я сделал что-то при наведении, которое изменяет отступдля размещения некоторых кнопок, но в safari / chorme он неправильно пересчитывает содержимое, добавив: после псевдокласса добился цели.

Обратите внимание, что я нигде не нашел этого в Интернете, я обнаружил егокогда возится.

Answer 3

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

Пример : поместите изображение относительно высокого качества (скажем, 1000x1000 пикселей) в небольшой div (200x200 пикселей) и установите для изображения ширину и высоту 100%. При трехмерном преобразовании div в масштабе 5 результат будет размытым в Safari и четким в Chrome. Используйте 2D-преобразование, и изображение будет четким в обоих случаях.

Обходной путь - преобразовать в 2D-преобразование после того, как вы закончите с 3D. Тем не менее, я обнаружил небольшую задержку при преобразовании между преобразованиями, поэтому это не слишком хорошо для меня.

Answer 4

Хммм ... У меня возникает та же проблема, когда я пытаюсь увеличить изображения карт Google (hidpi) с помощью Chrome 53.

Одним из решений является скрытие (непрозрачность, видимость) изображения для нескольких кадров (или контейнера, обертывающего изображение / изображения / что бы то ни было) ... лучшее решение, которое я нашел в другом посте на SO, было так ( выдается на содержащий DIV):

e.style.transform = 'translateZ(0) scale(1.0, 1.0)'

Кстати, мои вещи были просто обычными 2-мерными вещами, хотя translateZ, похоже, имеет значение, хотя я никогда не трогал ничего 3D.

Answer 5

Хммм ... У меня возникает та же проблема, когда я пытаюсь увеличить изображения карт Google (hidpi) с помощью Chrome 53.

Единственное решение, которое я нашел до сих пор, - это скрыть изображение (или div, содержащий изображения), а затем показать его снова. Может быть с непрозрачностью = 0 или видимостью = скрытой, но на самом деле она должна быть невидимой хотя бы для одного или двух кадров.

Кстати, это даже не 3d-трансформация. Просто 2D вещи.

Answer 6

Я не смог найти исправления для увеличения масштаба, чтобы не размытие в Safari (рабочий стол v7.0.2 и тот, что включен в iOS 6.1.3 и 7.0.6), но в какой-то момент я заметил, что получилSharp png, когда я устанавливаю масштаб на 5. Я не знаю почему, так как эта версия моего кода теряется во всех последующих изменениях, которые я сделал.Все остальные масштабные коэффициенты были размытыми.

Поскольку iPhone и iPad являются целевыми устройствами для этого проекта, я вместо этого отказался от масштабного преобразования и анимировал высоту изображения.Я разочарован тем, что команда Safari решила реализовать преобразования таким образом, чтобы во многих случаях сделать их непригодным вариантом.