Как исправить размытое фоновое изображение в масштабе преобразования

avatar
Marc
1 июля 2021 в 16:37
292
1
0

В моем приложении пользователи могут уменьшить масштаб определенной части. Для этого я использую преобразование: масштаб().

Мне удалось добиться гораздо менее размытых изображений с помощью

   -webkit-backface-visibility: hidden;
    -ms-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

на моих изображениях.

К сожалению, это не работает для элементов div с фоновым изображением. Эти изображения по-прежнему очень размыты.

Можно ли это исправить? (Пожалуйста, не говорите мне не использовать масштаб)

Источник

Ответы (1)

avatar
Harsh
1 июля 2021 в 16:49
0

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

Решение может состоять в том, чтобы изменить размер элемента настолько, насколько он вам когда-либо понадобится, и использовать преобразование для уменьшения его масштаба для первоначального отображения, например. если удвоить размер при наведении, вместо «масштаба (2,2)» начните с «размер: 200%, масштаб: (.5,.5)» и при наведении переключитесь на «масштаб (1,1)» ...

Вот обходной путь:

.normal {
  width: 200px;
  height: 200px;
  margin: 1em auto;
  transition: all 1s linear;
}

.normal:hover {
  transform: scale(2, 2);
}

.prescaled {
  width: 400px;
  height: 400px;
  margin: 1em auto;
  transition: all 1s linear;
  transform: scale(.5, .5);
  // fix positioning due to scale
  position: relative;
  top: -100px;
}

.prescaled:hover {
  transform: scale(1, 1);
}

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