具有 CSS opacity 属性的 <video> 仅在 Chrome 54 for Mac 上显得异常暗淡
Posted
技术标签:
【中文标题】具有 CSS opacity 属性的 <video> 仅在 Chrome 54 for Mac 上显得异常暗淡【英文标题】：<video> with CSS opacity property appears unusually dim on Chrome 54 for Mac only 【发布时间】：2017-03-13 23:29:26 【问题描述】：具有 CSS opacity 属性的 <video> 标记在 Mac 上的最新版本 Chrome (54) 上比其他浏览器（包括 Windows 上的 Chrome 54 和 Mac 上的 Chrome 53）更暗淡。当不透明度设置为像 0.2 这样的低值时，这一点非常明显。我已经在多个系统上见证了这一点。
在 Mac 上的最新版 Chrome（当前为 54）上运行此代码，然后在另一个浏览器上运行以查看差异。如何更改此代码以使 Chrome for Mac 上的视频不透明度与其他浏览器一致？
<!DOCTYPE html>
<html>
<head>
<title>Video</title>
<style type="text/css">
video
opacity: 0.2;
</style>
</head>
<body>
<video src="https://demos.churchthemes.com/maranatha/wp-content/uploads/sites/8/2016/10/lighthouse-loop.mp4" autoplay loop></video>
</body>
</html>
https://jsfiddle.net/68q91qwc/4/
Screenshot Comparison - 这显示了差异。
感谢您查看我的问题。
【问题讨论】：
【参考方案1】：我也遇到了这个问题，有人解决了吗？
编辑：
对此我已经实施了临时修复，首先使用以下内容将 .mac 或 .pc 类应用于正文：
if (navigator.userAgent.indexOf('Mac OS X') != -1)
$("body").addClass("mac");
else
$("body").addClass("pc");
然后使用仅限 chrome 的媒体查询来定位它。
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm)
#home.mac selector
opacity: 0.3;
【讨论】：
针对这个我已经实施了临时修复，首先使用以下将 .mac 或 .pc 类应用到正文。 我只在 Mac 上看到了 Chrome 54+ 的问题，因此检测这样的操作系统会使其他浏览器的不透明度错误。如果这是一个最终被修复的浏览器错误，那么未来也会有问题。为了避免检测操作系统/浏览器，我决定不使用不透明的视频，但像这样的方法可能是目前唯一的选择。以上是关于具有 CSS opacity 属性的 <video> 仅在 Chrome 54 for Mac 上显得异常暗淡的主要内容，如果未能解决你的问题，请参考以下文章
opacity:0 是不是与 visibility:hidden 具有完全相同的效果
我用css 中的opacity 设置元素背景的透明度 后发现该元素的内容透明度也跟着变化 怎样取消该内容的透明度
CSS 透明度怎么设置。 filter:alpha(opacity=10); 我这句话在IE中有效 在其它的浏览器中就没效（Opera）