修复后 Safari 背景颜色过渡为透明。漏洞？答案

【问题标题】：Safari background-color transition to transparent when fixed. Bug?修复后 Safari 背景颜色过渡为透明。漏洞？
【发布时间】：2025-12-01 20:25:02
【问题描述】：

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

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

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

div 为空
OR 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 V. 11.1，当我把它放在 JS Fiddle 中时它似乎工作正常。 jsfiddle.net/f0vkrb7h
刚刚在 Browserstack 中测试到 Safari V.12 并且仍然可以正常工作。很抱歉，如果不复制问题就无能为力了。但我会说使用透明可能是它.. 尝试使用 rgba，因为它可以得到尽可能具体的。但我确实看到你说那不起作用。
感谢您的测试。也许它与我的设置有关（构建/操作系统/图形卡）......

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

【解决方案1】：

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

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

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

【讨论】：

我最终采用了类似的解决方案。感谢您的确认。
您在哪里找到有关“位置：固定和背景：透明在 Safari 上不能很好地协同工作”的信息。能否请您发布该资源的链接？
我没有找到描述该问题的官方资源。我当时正在创建一个简单的单页网站，它有一个固定的标题，将背景从纯色更改为滚动时不透明的颜色。它可以按预期在每个浏览器上运行，但不能在 Safari 上运行。在 Safari 而不是透明背景上，我得到了没有不透明度的白色。当我将背景样式应用于固定元素的内部 div 时，它按预期工作。