Масштаб трансформации слегка подталкивает Font Awesome icon - PullRequest
Новая
       22

Масштаб трансформации слегка подталкивает Font Awesome icon

1 голос
/ 16 апреля 2020

У меня есть значок Font Awesome внутри родительского div с display: flex, который сам находится внутри контейнера div, который display: flex.

Когда я пытаюсь transform: scale(1.2) при наведении, он слегка подталкивает элемент:

https://jsfiddle.net/Daniel_Knights/gptyo3be/5/

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

i {
  cursor: pointer;
  transition: transform 0.2s;
}

i:hover {
  transform: scale(1.2);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

<div class="container">
  <div class="parent">
    <i class="fa fa-eye" id="single-item-eye"></i>
  </div>
</div>

Есть идеи, почему это может быть?

1 Ответ

1 голос
/ 16 апреля 2020

Вместо этого используйте версию SVG, и проблема не возникнет. Масштабирование SVG лучше, чем масштабирование текста: 

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
}

svg {
  cursor: pointer;
  transition: transform 0.2s;
}

svg:hover {
  transform: scale(1.2);
}
<script  src="https://use.fontawesome.com/releases/v5.13.0/js/all.js"></script>

<div class="container">
  <div class="parent">
    <i class="fa fa-eye" id="single-item-eye"></i>
  </div>
</div>

Похожие: Почему текст становится размытым и колеблется при преобразовании в 2-мерном масштабе

...