<video>のCSS不透明度プロパティはMac版Chromeではあまり表示されません

<video>タグのCSS opacityは、MacのChrome（54）の最新バージョンでは、他のブラウザ（WindowsではChrome 54、 MacではChrome 53）。これは、不透明度が0.2などの低い値に設定されている場合に非常に顕著です。私はこれを複数のシステムで目撃しました。<video>のCSS不透明度プロパティはMac版Chromeではあまり表示されません

このコードをMacの最新バージョン（現在は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 - これは違いを示しています。

私の質問をご覧いただきありがとうございます。

出典

2016-10-31 Steven Gliebe

私もこの問題を抱えていますが、誰も解決策を見つけましたか？

編集：これに対応して

私は身体に.macと.PCクラスを適用するには、次を使用して、まず、一時的な修正を実装しました。その後、

if (navigator.userAgent.indexOf('Mac OS X') != -1) { 
    $("body").addClass("mac"); 
} else { 
    $("body").addClass("pc"); 
}

とでこれをターゲットクロムのみのメディアクエリ。

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    #home.mac selector { 
     opacity: 0.3; 
    } 
}

出典

2016-11-07 11:40:55 Ben

私は一時的な修正を実装しました。まず、次のようにして.macまたは.pcクラスを本体に適用します。 – Ben

私はMac上でChrome 54+の問題を見たので、このようなOSを検出すると他のブラウザでは不透明になります。これが修正されたブラウザのバグなら、将来の問題もあります。 OS /ブラウザの検出を避けるために、不透明度のビデオを使用しないことにしましたが、このようなアプローチが唯一の選択肢かもしれません。 –

<video>のCSS不透明度プロパティはMac版Chromeではあまり表示されません

答えて

関連する問題