在Firefox上没有显示标题div不透明度

Question

所以我的页面上有一个标题div：定位：固定，默认设置为50％透明，向下滚动时，透明度会变为不透明状态。现在默认的50％透明度不是直接通过css设置，而是通过下面的JS函数设置。在Chrome中，50％的透明度显示完美，并且向下滚动也很好。但是在Firefox中，当页面加载时，50％的透明度不存在，但是当你向下滚动时，显示不透明状态，当你向上滚动时，透明度会出现但是我想在页面加载时立即出现在Firefox中。

我尝试使用filter：opacity = x但这只适用于IE。所有浏览器都支持RGBA，因此不是问题，我也使用-moz-transition供应商前缀，但这也不起作用。

JS：   window.onscroll = scroll;

function scroll() {
    var header=document.getElementById("header1");

    console.log(window.pageYOffset);
    if(window.pageYOffset > 50){
        console.log("Change Opacity now");
        header.classList.add('setOpaqueState');
        header.classList.remove('removeOpaqueState');
    }
    else{
        header.classList.remove('setOpaqueState');
        header.classList.add('removeOpaqueState');
    }

}

CSS:

.homepage #header1 {
transition: background 1.0s;
}
.homepage .setOpaqueState {
background-color: #261c3f;
}
.homepage .removeOpaqueState {
background-color: rgba(38, 28, 63, 0.5);
}