时间戳

首页 > 解决方案 > Safari 不显示第一个具有显示的元素：列中的 inline-flex 和 box-shadow

css - Safari 不显示第一个具有显示的元素：列中的 inline-flex 和 box-shadow

问题描述

我有几张卡片放在一个容器中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;
  &:hover {
    transform: scale(1.02) !important;
    transition: all .2s ease-in-out !important;
  }
}

标签： cssflexboxsafari

解决方案

推荐阅读