<video> CSS不透明度属性仅在Mac版Chrome 54上显示异常暗淡

具有CSS opacity属性的<video>标签在Mac上最新版本的Chrome(54)上比其他浏览器(包括Windows上的Chrome 54和Mac上的Chrome 53)更暗淡。当不透明度设置为像0.2这样的低值时，这一点非常明显。我在多个系统上都看到过这种情况。

在Mac上运行最新版本的Chrome(目前是54)，然后在另一个浏览器上运行此代码以查看差异。如何改变这段代码，使视频不透明的Chrome 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/

截图对比-这显示了差异。

谢谢你看我的问题。

我也得到这个问题，有人找到解决方案吗?

编辑:

为了解决这个问题，我已经实现了临时修复，首先使用以下命令将。mac或。pc类应用于body:

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;
    }
}

相关内容

最新更新

热门标签：