從Safari中的純色更改時，透明背景變爲黑色

Question

我使用headroom.js在滾動上隱藏/顯示導航欄。很棒。在向上滾動時，nav具有固定的背景顏色，當nav位於頂部時，背景應該是透明的。在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); 

在safari中透明=黑色透明（rgba（0,0,0,0））