在 Safari 中从纯色更改时透明背景变为黑色

Question

我在滚动时使用 headroom.js 到 hide/show 导航栏。效果很好。向上滚动时，导航具有纯色背景，当导航位于顶部时，背景应该是透明的。 Chrome 没有问题，但 Safari 有问题。

标记：

<header class="headroom navigation">
 <div> class="navigation__bg">...</div>
</header>

CSS:

.headroom--not-top {
  .navigation__bg {
    background-color: red;
  }
}

.headroom--pinned {
    transform: translateY(0%);
    .navigation__bg {
      background-color: transparent; // becomes black on Safari most times
    }
}

.headroom {
    will-change: transform;
    transition: transform .5s linear;
}

我不明白为什么背景变黑了。有什么原因吗？

Answer 1

首先你有

<div> class="navigation__bg">...</div>

应该是：（关闭太早）

<div class="navigation__bg">...</div>

其次设置你的

background-color: transparent;

到

background-color: white, rgba(255,255,255,0);

在 safari 中作为透明 = 黑色透明 (rgba(0,0,0,0))

在 Safari 中从纯色更改时透明背景变为黑色

Transparent background becomes black when changing from solid colour in Safari

html

css

safari

headroom.js