Video renders slightly brighter in Safari and Chrome than in Firefox

Question

I'm trying to fit small part of a video on the larger static PNG background and the edges of the video are supposed to seamlessly blend to the background, ie. you shouldn't be able to recognize where the video ends and static image in the background starts.

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

filter: saturate(100%)

(which shouldn't change the video at all). I created this JSFiddle to demonstrate the problem https://jsfiddle.net/bj4hshwz/1/. Without it, it renders the video slightly brighter. With the filter property, the video is darker/more saturated (and matches the background in my case). Firefox renders the video correctly and it matches the background and in Safari, it's always brighter, whether you add the filter or not.

Is there a way how to make the video in Safari also correct?

Answer 1

The no-op filter changing rendering is a bug. You should report it to the browser vendor. Your reduced test case is going to be helpful for fixing this.

Apart from that, there's a problem of color profile handling in videos, and it's a bit of a mess.

Images and CSS colors on the web generally settled on the sRGB color space, but videos internally use a few other color spaces, most commonly Rec. 709 (for HD) and BT. 601 (old SD TV).

The problem is these profiles are similar enough that a lot of software doesn't care about converting between them, or converts incorrectly (which so easy, because there are so many subtly incompatible color spaces called "YUV"). Only when you try to match colors exactly (like you do), the error becomes noticeable.

Rec 709 has gamma ~2.4 and sRGB has gamma ~2.2, so software that doesn't convert precisely between them is going to make brightness slightly off. 709/601 mix-up is going to shift hue a bit.

To get video colors match CSS colors exactly all the stars must align:

1. Software that you use to generate video needs to read colors in sRGB and convert them correctly to video's color space (e.g. Rec. 709). It probably won't, unless you set appropriate flags/checkboxes.
2. Information about the video color space should be embedded in the metadata of the video file, so that the players don't guess it. Some players will guess anyway (e.g. Firefox assumes low-res videos can't use HD color space).
3. Player (browser) has to understand video color spaces and be able to choose the right color space for the video.
4. The browser has to play the video with conversion of color to the display color space (last time I checked Firefox didn't do that, unless you manually enabled a hidden option).
5. The browser has to convert CSS colors from sRGB to display color space (or failing that, leave CSS colors alone, but always convert videos to sRGB). Chrome is very bad at this.

You can count on Safari doing all of this correctly, but in other browsers it's generally hopelessly buggy. Consider changing your design to hide the discrepancy?