使用display:flex的轮播图在Safari中无法适配容器问题求助

问题源于Safari对flex布局、aspect-ratio以及object-fit的兼容性处理差异，以下是针对性修复步骤：

1. 为图片添加明确宽高属性 #

Safari中object-fit: cover需要元素有明确的宽高才能生效，仅靠flex属性无法触发适配逻辑。修改图片的CSS规则：

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  object-fit: cover;
  /* 新增两行，强制图片占满容器 */
  width: 100%;
  height: 100%;
}

2. 补充aspect-ratio的-webkit前缀 #

旧版Safari不支持原生aspect-ratio属性，需要添加-webkit前缀保证容器比例正确：

.slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -webkit-flexbox;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  aspect-ratio: 3/4;
  /* 新增前缀 */
  -webkit-aspect-ratio: 3/4;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* 补充scroll-snap的-webkit前缀 */
  -webkit-scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

3. 完善scroll-snap属性兼容性 #

为scroll-snap-align添加-webkit前缀，确保滚动吸附效果在Safari中正常工作：

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  /* 新增前缀 */
  -webkit-scroll-snap-align: start;
  scroll-snap-stop: always;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

完整修复后的CSS代码 #

.Potrait {
  left: 50%;
  position: relative;
  top: 45%;
  transform: translate(-50%, -50%);
  width: 80vmin;
}

.slider-wrapper {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
}

.slider {
  display: -webkit-box;
  display: -webkit-flex;
  display: -webkit-flexbox;
  display: -moz-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  aspect-ratio: 3/4;
  -webkit-aspect-ratio: 3/4;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.slider img {
  flex: 1 0 100%;
  scroll-snap-align: start;
  -webkit-scroll-snap-align: start;
  scroll-snap-stop: always;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slider-nav {
  display: flex;
  column-gap: 1rem;
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

.slider-nav a {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.75;
  transition: opacity ease 250ms;
}

.slider-nav a:hover {
  opacity: 1;
}

修复原理 #

• Safari中flex容器内的图片若无明确宽高，object-fit无法正确识别容器尺寸，导致图片保持原始大小；
• 旧版Safari对原生aspect-ratio支持不完善，需通过-webkit前缀确保容器比例生效；
• 补充scroll-snap相关属性的-webkit前缀，保证滚动吸附逻辑在Safari中正常运行。

内容的提问来源于stack exchange，提问作者Luis Soma