除margin collapse外，Safari中图片画廊margin-right失效的其他原因？

仅在Safari浏览器中遇到图片画廊的margin异常问题，尝试了所有关于margin collapse的解决方法均无效。具体表现为：滑动到图片画廊最右侧时，最后一张图片紧贴容器边缘，无法保持设置的50% margin-right，该功能在Chrome中表现正常。

问题代码示例 #

CSS代码 #

body {
  margin: 0 5vw;
  background-color: #FFFFED;
}

.document-container {
  height: 95svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid red;
}

.main-section {
  overflow: hidden;
}

.individual-bike-container {
  height: 55%;
  width: 100%;
}

.image-gallery {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  display: flex;
  justify-content: space-between;
}

.gallery-item {
  object-fit: contain;
  margin-right: 50%;
}

.gallery-item:first-child {
  margin-left: 50%;
}

.snap-inline {
  scroll-snap-type: inline mandatory;
}

.snap-inline > * {
  scroll-snap-align: center;
}

HTML代码 #

<div class="document-container">
    <main class="main-section">
        <div class="individual-bike-container">
            <div class="image-gallery snap-inline">
                <img src="https://images.unsplash.com/photo-1561265912-ec91f904ab58?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU0NDd8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1617374898844-6d62f57880e8?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU0NDd8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1623999225365-d2e27b2bbeb0?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU1MzN8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1615346071252-bdf14011f572?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU1MzN8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1593952944187-e4716504eedb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU1NzN8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1609630875289-22852fa678ce?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU2MTZ8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1568821649835-f4ce9848e1f5?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU2MTZ8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1579462127203-ab8fea039934?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU2NzF8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1502744688674-c619d1586c9e?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU2NzF8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item">
                <img src="https://images.unsplash.com/photo-1561270779-b4efce02efd3?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTQwNzU3MDl8&ixlib=rb-4.0.3&q=85" alt="" class="gallery-item last-child-img">
            </div>
        </div>
        <p>Scroll the images sideways, all the way to the right to see the problem. The problem occurs in Safari only.</p>
    </main>
</div>

已尝试的解决方案（均无效） #

• 给容器及最后子元素添加padding
• 使用flex布局（理论上可防止margin collapse）
• 设置overflow:scroll
• 调整最后子元素的padding-right百分比，但会导致浏览器resize时图片偏移

问题原因及解决方案 #

原因 #

这并非margin collapse导致，而是Safari对flex容器中最后一个子元素的margin计算存在兼容性问题——Safari不会将最后一个子元素的margin计入可滚动区域的总宽度，导致滚动到最右侧时无法显示该margin。

解决方案 #

方法一：添加伪元素模拟最后一个元素的margin

给.image-gallery添加伪元素，让Safari将其纳入滚动宽度计算：

.image-gallery::after {
  content: "";
  width: 0;
  margin-right: 50%;
}

方法二：改用padding+gap实现（更推荐）

替换margin为容器padding+flex gap，符合flex布局规范，避免兼容性问题：

.image-gallery {
  height: 100%;
  width: 100%;
  overflow-x: auto;
  display: flex;
  padding: 0 50%;
  gap: 50%;
}

.gallery-item {
  object-fit: contain;
}

/* 移除原有冗余样式 */
.gallery-item:first-child {
  margin-left: 0;
}

技术问题提问优化建议 #

• 明确环境信息：直接说明浏览器版本（如Safari 17.4）、系统版本，缩小兼容性排查范围
• 聚焦核心问题：开头直接点明“仅Safari中最后一张图片右侧margin失效”，减少无关描述
• 结构化尝试记录：用列表清晰列出已尝试的方案及结果，避免杂乱叙述
• 补充预期效果：简洁描述Chrome中的正常表现（如“最后一张图片右侧保留50%容器宽度的间距”），帮助回答者快速理解需求
• 简化示例代码：保留核心代码，去掉无关样式（如body背景色、容器边框），让问题更突出

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