The video looks a little brighter in Safari and Chrome than in Firefox

I am trying to set a small part of the video on a larger static PNG background, and the edges of the video should move smoothly to the background, i.e. you won’t be able to recognize where the video ends and the static image in the background begins.

However, I found out that every browser makes video colors differently. In Chrome, it depends on whether you add the ANY CSS filter (-webkit-filter) property, for example

filter: saturate(100%)

(which should not change the video at all). I created this JSFiddle to demonstrate the problem https://jsfiddle.net/bj4hshwz/1/ . Without it, the video becomes a little brighter. With the filter property, the video is darker / richer (and matches the background in my case). Firefox displays the video correctly, and it matches the background and in Safari, it is always brighter, whether you add a filter or not.

Is there a way to make videos in Safari the right way too?

+4
source share
1 answer

A filter that changes the absence of a filter is an error. You must report this to your browser provider. Your shortened test case will be helpful in fixing this.

, , .

CSS sRGB, , Rec. 709 ( HD) BT. 601 ( SD-).

, , ( , , "YUV" ). ( ), .

Rec 709 -2.4, sRGB -2.2, , , . 709/601 .

CSS, :

  • , , sRGB (, 709). , , /.
  • , . (, Firefox , HD).
  • () .
  • ( , Firefox, , ).
  • CSS sRGB (, , CSS- , sRGB). Chrome .

, Safari , . , ?

0

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


All Articles