Элемент с border-radius показывает артефакты после перехода в Microsoft Edge - PullRequest
Новая
       5

Элемент с border-radius показывает артефакты после перехода в Microsoft Edge

0 голосов
/ 07 февраля 2019

У меня есть элемент с примененным border-radius, который, похоже, оставляет после себя какой-то след (визуальная ошибка) при возврате к своей нормальной ширине после сокращения, чтобы приспособиться к другим увеличенным элементам.Похоже, что это происходит только тогда, когда используется свойство border-radius, а уровень сбоя пропорционален значению border-radius.

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

До наведения:

before

Во время наведения:

during

После наведения (ошибка):

after

#container {
  display: flex;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}

#reduce {
  background: #eee;
  width: 100%;
  height: 50px;
  border-radius: 30px;
}

#hoverexpand {
  transition: all 0.5s ease;
  width: 20%;
}

#hoverexpand:hover {
  width: 50%;
}
<div id="container">
  <div id="reduce">
  </div>
  <div id="hoverexpand">
    <span>Hover this</span>
  </div>
</div>

Опять же, это происходит только в Microsoft Edge, и я озадачен тем, что может быть причиной.Это известная ошибка?Есть ли обходной путь?

1 Ответ

0 голосов
/ 20 марта 2019

Есть обходной путь.Вы можете заставить Edge перерисовать затронутый элемент, переместив его в составной слой с translateZ.

. Вам нужно только установить следующее правило для вашего элемента #reduce: 

transform: translateZ(0);

Вот рабочий пример: 

#container {
  display: flex;
  align-items: center;
  width: 50%;
  margin: 0 auto;
}

#reduce {
  flex: 2 0;
  background: #eee;
  height: 50px;
  border-radius: 30px;
  transform: translateZ(0);
}

#hoverexpand {
  flex: 1 0;
  transition: flex 0.5s ease;
}

#hoverexpand:hover {
  flex: 2 0;
}
<div id="container">
  <div id="reduce">
  </div>
  <div id="hoverexpand">
    <span>Hover this</span>
  </div>
</div>
...