All geek questions in one place

<video> with CSS opacity looks unusually dull on Chrome 54 Mac only

A tag <video>with a CSS property is opacitymore lackluster on the latest version of Chrome (54) on Mac than other browsers (including Chrome 54 on Windows and Chrome 53 on Mac). This is very obvious when the opacity is set to a low value, such as 0.2. I have witnessed this on several systems.

Run this code in the latest version of Chrome (currently 54) on a Mac, and then in another browser to see the difference. How can I change this code to make the opacity of the video in Chrome for Mac compatible with other browsers?

<!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 - This shows the difference.

Thanks for watching my question.

+4
1

, - ?

:

, : .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;
    }
}
0

Source: https://habr.com/ru/post/1659444/

More articles:


All Articles