修复后 Safari 背景颜色过渡为透明。漏洞？
Posted
技术标签:
【中文标题】修复后 Safari 背景颜色过渡为透明。漏洞？【英文标题】：Safari background-color transition to transparent when fixed. Bug? 【发布时间】：2019-09-24 06:37:54 【问题描述】：我在 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，因为它可以得到尽可能具体的。但我确实看到你说那不起作用。 感谢您的测试。也许它与我的设置有关（构建/操作系统/图形卡）...... 【参考方案1】：我刚刚遇到了同样的 Safari 错误，对此感到非常沮丧......
position: fixed 和 background: transparent 在 Safari 上似乎不能很好地协同工作。
我最终在我的“固定”div 中添加了一个 div，并将其用于我的背景颜色过渡。
【讨论】：
我最终采用了类似的解决方案。感谢您的确认。 您在哪里找到有关“位置：固定和背景：透明在 Safari 上不能很好地协同工作”的信息。能否请您发布该资源的链接？ 我没有找到描述该问题的官方资源。我当时正在创建一个简单的单页网站，它有一个固定的标题，将背景从纯色更改为滚动时不透明的颜色。它可以按预期在每个浏览器上运行，但不能在 Safari 上运行。在 Safari 而不是透明背景上，我得到了没有不透明度的白色。当我将背景样式应用于固定元素的内部 div 时，它按预期工作。以上是关于修复后 Safari 背景颜色过渡为透明。漏洞？的主要内容，如果未能解决你的问题，请参考以下文章