css - 固定后，Safari 背景颜色过渡为透明。漏洞？

标签 css safari css-transitions css-position background-color

我在 Safari 12.1 (14607.1.40.1.4) 中将背景颜色转换为透明时遇到问题。

代码不会将背景转换为透明。相反，它在悬停时会闪烁或什么都不做。

过渡似乎在 Chrome 和 Firefox 中运行良好。如果

div 是空的
或 Position:fixed 被移除
或者将目标背景颜色设置为一种颜色(尽管 rgba 透明度不起作用)

<!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>

我希望能够将固定的 div 背景颜色转换为透明。有没有办法让它发挥作用？

最佳答案

我刚刚遇到了同样的 Safari 错误并且对此感到非常沮丧......

似乎 position: fixed 和 background: transparent 在 Safari 上不能很好地协同工作。

我最终在我的“固定”div 中添加了一个 div，并将其用于我的背景颜色转换。

关于css - 固定后，Safari 背景颜色过渡为透明。漏洞？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56008366/