Неправильное отображение border у псевдоэлементов в Google Chrome

Question

.separator {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1;
  /* для того, чтобы сепараторы занимали все свободное пространство */
  border: 1px solid #EEBF3A;
}

<div class="separator bg-grey">
  <div class="separator-icon home-icon"></div>
</div>

Как это выглядит в Firefox (все правильно):

И в Google Chrome:

Наверное плохо видно, поэтому вот кроп:

У псевдоэлементов появляется высота и сепараторы получаются расслоенными. Как это исправить? Возможно какой-то сброс стилей прописать?

Answer 1

Не думал, что возникнет такая проблема. Действительно, Chrome (v 87.0.4280.141) рендерит так, что появляется зазор на масштабах 125, 150, 175 и 250 процентов. При этом, Firefox (v 84.0.2) всё отображает корректно, даже с масштабом 133%.

еще вариант, прописать background-color, но тогда в Firefox толщина сепаратора будет 2 px

Она и так 2px должна быть, потому что толщина border равна 1px, но border-а два - top и bottom. И, если Firefox отображает только 1px, то тогда уже этот браузер неверно рендерит.

Поэтому, просто меняем border на background-color и ставим height: 2px; - должно максимально одинаково отображаться в любом браузере:

.separator {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.separator::before,
.separator::after {
  content: "";
  flex: 1; /* для того, чтобы сепараторы занимали все свободное пространство */
  height: 2px;
  background-color: #EEBF3A;
}

<div class="separator bg-grey">
  <div class="separator-icon home-icon"></div>
</div>

БЛОГ НА HUSL

Неправильное отображение border у псевдоэлементов в Google Chrome

Ответы (1 шт):