'portfolio mobile menu background is slightly transparent on iOS. I want it to be fully opaque and it is on Firefox, chrome etc.. but not on iOS/safari

I tried to add the important statement, here’s the code

// mobile background cover
.bg-cover {
    width: 1px;
    height: 1px;
    background-color: $bg-grey !important;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 20;
    border-radius: 50%;
    transition: transform 400ms;
}

.open-menu .bg-cover {
    transform: scale(2500);
    transition: transform 1s;
    z-index: 996;
    opacity: 1;
}

but it didn’t work…

I also tried to add an if statement for devices using safari but it still didn’t work

// safari mobile menu colour optimisation
const bgCover = document.getElementById('bg-cover');

if(window.navigator.userAgent.includes("Safari")) {
    bgCover.setAttribute ('style', 'background-color: #3c3c4c !important;');
};
javascriptcssiossafaricross-browser


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions