Почему ломается тень в safari с grid?
Есть обычная сетка grid, но почему-то только в сафари у некоторых дивов ломается тень в левом верхнем углу (причём комбинация ломающихся дивов может меняться с каждым обновлением страницы). Если дивам поставить overflow: hidden; то проблема остаётся только у первого дива. До этого была реализация без grid, и проблем с тенью не было. В других браузерах всё нормально. На дивах есть hover, и при наведении на любой из них везде тени нормализуются до тех пор, пока с них не убрать курсор. Как вылечить?
.products { display: grid; grid-template-columns: repeat(4, 1fr); width: 90vw; margin: 0 auto; row-gap: 2vw; column-gap: 2vw; } .product { position: relative; padding: 7.5%; border-radius: 4vw; box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 1s ease; overflow: hidden; } .product:hover { transform: scale(1.025); } |
.products { display: grid; grid-template-columns: repeat(4, 1fr); width: 90vw; margin: 0 auto; row-gap: 2vw; column-gap: 2vw; } .product { position: relative; padding: 7.5%; border-radius: 4vw; box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.1); cursor: pointer; transition: transform 1s ease; overflow: hidden; } .product:hover { transform: scale(1.025); }
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с тенью в Safari при использовании Grid может возникать из-за различий в реализации теней между разными браузерами. В Safari могут возникать проблемы с тенью, если элемент, на который она накладывается, имеет свойство `overflow: hidden`, что может приводить к обрезанию тени.
Для того чтобы исправить эту проблему, рекомендуется использовать несколько подходов. Во-первых, убедитесь, что элемент, на который накладывается тень, имеет достаточное пространство для отображения тени. Вы можете попробовать увеличить отступы или размеры элемента, чтобы тень не была обрезана.
Во-вторых, вы можете попробовать использовать альтернативный способ создания тени, например, с помощью псевдоэлементов `::before` или `::after`. Это может помочь избежать проблем с обрезанием тени в Safari.
Ниже приведен пример кода на языке PHP, демонстрирующий использование псевдоэлемента для создания тени:
.element { position: relative; } .element::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
Если проблема все еще не решена, попробуйте обновить браузер до последней версии или поискать другие способы исправления этой проблемы, такие как использование JavaScript для создания тени или использование других CSS свойств для стилизации элемента. Надеюсь, что эти советы помогут вам решить проблему с тенью в Safari при использовании Grid.