marin-right on :last-of-type 仅在 safari 和 iOS 中工作

Question

我有一个带有英雄图像的水平滑块。在 iOS（和 safari）上，最后一张图片看起来没有考虑

margin-right: $custom-offset;

的右边距。 第二个英雄图像也应该居中，与第一个英雄图像的做法相同。

当我选择 DOM 中的第一个元素和 (.contract-slider) 的 Flexbox 时，您会看到以下内容：

当我转到下一个元素时

我的代码如下：

.custom-slider__container {
  width: 100%;
}

.custom-slider {
  scroll-behavior: smooth;
  display: flex;
  gap: var(--custom-spacing-03);
  align-items: stretch;
  width: 100%;
  height: 241.5px;
  overflow: auto;
  scroll-snap-type: x mandatory;
  pointer-events: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none;
  }
}

$custom-width: min(320px, 65%);
$custom-offset: calc(50% - ($custom-width / 2));

.custom-contract {
  display: flex;
  align-items: center;
  min-width: $custom-width;
  height: 100%;
  cursor: pointer;
  scroll-snap-stop: always;
  scroll-snap-align: center;

  &:first-of-type {
    margin-left: $custom-offset;
  }

  &:last-of-type {
    margin-right: $custom-offset;
  }

  .custom-contract__content {
    user-select: none;
    transition: var(--custom-animation-timing-small) ease all;
    transform: scale(0.8);
  }

  .custom-contract__image {
    aspect-ratio: 800 / 500;
  }

  &--active {
    transform: none;

    .custom-contract__content {
      transform: none;
    }
  }
}

<div class="custom-slider__container">
  <div
    ref="sliderContainer"
    class="custom-slider"
  >
    <div
      v-for="(customContract, index) in customContracts"
      :key="customContract.Id"
      :ref="($el) => { customContractRefs[customContract.Id] = $el }"
      class="custom-contract"
      :class="{
        'custom-contract--active':
          customContract.driverId === mostCenteredCustomContract
      }"
      :aria-label="custom-label"
      @click="doSomething()"
    >
      <div class="custom-contract__content">
        <img>
      </div>
    </div>
  </div>
</div>

我已经尝试过以下方法

• 更改为

  &:last-of-type

  为

  &:last-child

• 在代替

  &:last-of-type

  之后添加了伪元素：

.contract::after {
  margin-right: $offset;
}

以上均无效。为什么我的边距权利没有出现？是因为 flexbox 在 safari/iOS 上的工作方式吗？

Answer 1

Safari 似乎无法将滚动捕捉与边距结合起来。

您可以做的是使用

::before

和

::after

伪类以及一些 Flexbox 技巧向容器添加边距。这意味着您可以放弃 SCSS 计算。

.custom-slider::before,
.custom-slider::after {
  flex: 0 0 50%;
  content: '';
}