Текст размывается при использовании перехода и масштабирования Chrome и FireFox

когда я использую как transition и transform, анимации не очень гладкие как на chrome и на firefox. Он размывается, когда вы наводите на него курсор. Единственным браузером, на котором это нормально, является IE.

Chome/FireFox (обратите внимание на текст, когда начинается анимация, он начинает размываться. Когда он заканчивается, он возвращается к гладким буквам.)

Желаемый результат (работает в IE)

Как сделать эти анимации также гладкими на chrome и firefox?

Snippet:

как только переход завершен, элемент должен снова сфокусироваться. То, что теперь выглядит на chrome и firefox.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

Ответы

Ответ 1

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

button {
  font-size: .875em; /* =14/16 or whatever your base font size is */
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
}

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

Chrome 64 в Windows 10:

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: .875em; /* =14/16 or whatever your base font size is */
  color: #fff;
  padding: .625em; /* =10/16 */
  border-radius: .1875em; /* =3/16 */
  transition: all .33s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}

button:hover {
  font-size: 1em; /* close enough to 1.1x */
  transition: all .33s ease-in-out;
}

<span style="position: relative; left: 2.5em; top: 1em;">
  <button>Hover me</button>
</span>

Ответ 2

Мне удалось удалить размытие на Firefox с помощью:

Скрытая видимость обратной ссылки устраняет проблему, поскольку она упрощает анимацию только перед объектом, тогда как по умолчанию используется фронт и спина.

backface-visibility: hidden;

или (или оба)

TranslateZ также работает, так как это взлом для добавления аппаратного ускорения в анимацию.

transform: translateZ(0);

Ответ 3

Вы можете попробовать, если перспектива может исправить вашу проблему, она фиксирует текст в нем по оси z, а не по технической причине.

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 10px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  -webkit-perspective: 1;
  perspective: 1;
}

button:hover {
  transform: scale(1.1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>

Ответ 4

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

button {
  background-color: cornflowerblue;
  border: 1px solid cornflowerblue;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  padding: 20px;
  border-radius: 3px;
  transition: all .33s ease-in-out;
  transform:scale(0.7);
}

button:hover {
  transform : perspective(1px) scale(1);
  transition: all .33s ease-in-out;
}

<button>Hover me</button>