Прозрачный фон становится черным при переходе от сплошного цвета в Safari

Question

Я использую headroom.js, чтобы скрыть / показать панель навигации при прокрутке. Работает отлично. При прокрутке вверх навигация имеет сплошной цвет фона, а когда навигация вверху, фон должен быть прозрачным. Нет проблем с 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;
}

Я не могу понять, почему BG становится черным. Какой-либо причине?

Answer 1

Ну для начала у вас есть

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

это должно быть: (закрытие слишком рано)

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

Во-вторых, установите свой

background-color: transparent;

в

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

Как прозрачный = черный прозрачный (rgba(0,0,0,0)) в сафари