Safari/iOS下滑块:last-of-type的margin-right失效问题排查

架构老林

2026-7-9

问题原因与解决方案

核心原因

这确实是Safari/iOS Flexbox的已知渲染bug：当横向滚动的Flex容器设置了overflow-x: auto时，Safari不会将最后一个flex子项的margin-right计入容器的可滚动总宽度。视觉上就表现为最后一张图的margin-right没生效，滚动时无法像第一张图那样留出相同的偏移量。

可行解决方案

方案1：用容器`padding-right`替代子项`margin-right`

放弃给最后一张图加margin-right，直接给滑块容器添加padding-right: $custom-offset。Safari能正确识别容器内边距，滚动范围会包含这个padding，最后一张图就能和第一张保持一致的居中偏移：

.slider-container {
  display: flex;
  overflow-x: auto;
  padding-right: $custom-offset; /* 替代最后一项的margin-right */
  padding-left: $custom-offset; /* 保持和首项一致的偏移 */
}

.slider-item {
  /* 移除:last-of-type/:last-child的margin-right设置 */
  margin-left: $gap; /* 只保留项之间的间距 */
}

方案2：添加占位元素模拟margin-right

如果必须保留子项的margin逻辑，可以在滑块的最后添加一个空的占位元素（或用伪元素），设置宽度等于$custom-offset，让Safari计算滚动范围时包含这个占位：

.slider-container {
  display: flex;
  overflow-x: auto;
}

.slider-container::after {
  content: '';
  flex: 0 0 auto;
  width: $custom-offset;
  height: 0; /* 不占用纵向空间 */
}

.slider-item:last-of-type {
  margin-right: 0; /* 移除原有的margin-right */
}