Search code examples
csssafaricss-transitionscss-positionbackground-color

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

  • The div is empty
  • OR Position:fixed is removed
  • OR The target background-color is set to a color (rgba transparency doesnt work though)
<!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?

Solution

  • 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.