CODEWITHSUNDEEP
csssafaricss-transitionscss-positionbackground-color
Lukeperry
Lukeperry

Reputation: 73

Safari background-color transition to transparent when fixed. Bug?

I have a problem transitioning background-color to transparent in Safari 12.1 (14607.1.40.1.4).

The code will not transition the background to transparent. Instead it flickers or does nothing att all when hovered.

The transitions seems to work fine in Chrome and Firefox. And it does work in Safari aswell if

<!DOCTYPE html>
<html>
    <head>
        <style>
        body{
            background-color:white;
        }
        .box{
            width:200px;
            height:100px;
            background-color:lightblue;
            transition:1s all;
            position:fixed;
        }
        .box:hover{
            background-color:transparent;
        }
        </style>
    </head>
    <body>
        <div class="box">test</div>
    </body>
</html>

I want to be able to transition a fixed divs background-color to transparent. Is there a way to get this to work?

Upvotes: 4

Views: 1761

Answers (1)

needsleep
needsleep

Reputation: 2715

I just hit the same Safari bug and was very frustrated with it...

It seems that position: fixed and background: transparent don't work well together on Safari.

I ended up adding a div inside my "fixed" div and used that for my background color transition.

Upvotes: 4

Related Questions