Блог

У меня есть несколько карточек, которые находятся в контейнере, columns и на каждой карточке есть box-shadow и display: inline-flex . На рабочем столе атрибут столбца установлен в 3 значение , планшет есть 2 , мобильный есть 1 . На рабочем столе Safari первая карта во второй и третьей колонках не отображается, если я не удалю box-shadow или не изменю display ее на block или не удалю columns из контейнера.

Я просмотрел сообщения, связанные с этим, но в них в основном упоминаются проблемы со старыми версиями Safari, где -webkit-box-shadow или -webkit-columns было необходимо, но это уже не так и не возымело эффекта.

У меня была аналогичная проблема, когда эти же две карты мигали в Chrome, но я обнаружил, что это было вызвано тем transform , что происходит :hover , и с помощью will-transform исправлена эта проблема.

 .container {
  margin-bottom: 60px;
  width: 100%;
  columns: 3;
  padding: 0 12px;
}

.card {
  border: 1px solid #f7f7f7;
  border-radius: 4px;
  box-shadow: 0px 10px 16px 5px rgba(0,0,0,0.11);
  color: #000;
  display: inline-flex;
  justify-content: space-between;
  margin-bottom: 26px;
  padding: 16px;
  width: 100%;
  will-change: transform;
  amp;:hover {
    transform: scale(1.02) !important;
    transition: all .2s ease-in-out !important;
  }
}