Is there another behavior besides margin collapsing that causes similar problems in Safari?

Question

I seem to have ran into a margin collapsing problem only in Safari, yet none of the provided ways on stackoverflow about margin collapse seem to help.

Only in Safari, if you swipe all the way to the end of the image gallery, you'll see the last image is stuck to the end of the container, instead of maintaining the margin-right of 50%.

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;
}

<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>

I have tried adding padding to the container, and to the last child of the image gallery. The gallery is already in flex, which supposedly also prevents collapse. Also, the overflow is set to scroll, which should also prevent collapse. I have also tried setting the padding-right on the last child to various percentages, but resizing the browser off-centers the images. My only theory is that it's not margin collapse that is causing this behavior, but I can't pinpoint a cause nor solution.

The site works as intended so far in Chrome, I'm only running into problems in Safari. If you would like to see the desired results, please re-open the codepen in Chrome.

Also, please let me know if I could improve my question for future reference.