<video> Свойство CSS opacity выглядит необычно тусклым для Chrome 54 только для Mac

A <video> тег с CSS opacity свойство более тускло на последней версии Chrome (54) на Mac, чем другие браузеры (включая Chrome 54 на Windows и Chrome 53 на Mac). Это очень очевидно, когда непрозрачность установлена на низкое значение, например 0,2. Я был свидетелем этого на нескольких системах.<video> Свойство CSS opacity выглядит необычно тусклым для Chrome 54 только для Mac

Запустите этот код в последней версии Chrome (в настоящее время 54) на Mac, а затем в другом браузере, чтобы увидеть разницу. Как этот код можно изменить, чтобы сделать непрозрачность видео в 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/

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

Я только видел проблему с Chrome 54+ на Mac, поэтому обнаружение ОС, как это, сделает непрозрачность для других браузеров. Если это ошибка браузера, которая в конечном итоге фиксируется, тогда будет и будущая проблема. Я решил не использовать видео с непрозрачностью, чтобы избежать обнаружения ОС/браузера, но такой подход может быть единственным вариантом на данный момент. –

<video> Свойство CSS opacity выглядит необычно тусклым для Chrome 54 только для Mac

ответ

Смежные вопросы