The brightness levels of the video appear to be slightly elevated in Safari and Chrome compared to that

My goal is to seamlessly blend a small part of a video with a larger static PNG background, ensuring that the edges of the video are indistinguishable from the background. However, I've encountered an issue where different browsers render the colors of the video differently.

In Chrome, the rendering varies depending on whether any CSS filter (-webkit-filter) property is added, such as

filter: saturate(100%)

(which should not alter the video at all). I have created a JSFiddle to illustrate this problem here. Without the filter, Chrome renders the video slightly brighter, while with the filter property, the video appears darker or more saturated (matching the background in my case). Firefox correctly renders the video to match the background, but Safari consistently displays it as brighter, regardless of the presence of the filter.

Is there a solution to ensure that the video displays correctly in Safari as well?

Answer №1

The issue with the no-op filter affecting rendering is a software bug that should be reported to the browser vendor for resolution. Providing a reduced test case will assist in troubleshooting and fixing the problem.

In addition, there is an ongoing challenge with color profile management in videos that needs attention. Images and CSS colors on the web typically adhere to the sRGB color space, while videos internally utilize various other color spaces such as Rec. 709 (for HD) and BT. 601 (for old SD TV).

The issue arises when these profiles are not accurately converted between, leading to discrepancies in color representation. Differences in gamma values between Rec. 709 (~2.4) and sRGB (~2.2) can result in variations in brightness, while mixing up 709/601 can cause shifts in hue.

Aligning video colors with CSS colors requires precise coordination:

  1. The software used to generate videos must read colors in sRGB and convert them correctly to the video's color space (e.g. Rec. 709), which may require specific settings adjustments.
  2. Metadata within the video file should include information about the color space to prevent players from making assumptions. Some players, like Firefox, may still guess incorrectly.
  3. The player (browser) must comprehend video color spaces and select the appropriate color space accordingly.
  4. The browser should play the video while converting colors to match the display color space, although some browsers may not do this automatically without manual configuration.
  5. The browser must also convert CSS colors from sRGB to the display color space, or at least ensure videos are always converted to sRGB. Chrome has been known to struggle in this area.

Safari typically handles these color conversions smoothly, but many other browsers exhibit significant bugs in this process. It might be worth considering design changes to mitigate any noticeable differences caused by color discrepancies.

Answer №2

While browsing on Chrome for Android, I encountered an issue and decided to target Chrome specifically with the following code:

@media screen and (-webkit-min-device-pixel-ratio:3) and (pointer:coarse){
video:first-child {
    filter: contrast(1)
    }
}

However, this code did not work when viewing in fullscreen mode.

After some investigation, I came across a suggestion to adjust

chrome://flags/#force-color-profile
to sRGB, which ultimately resolved the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Some font-awesome icons are not appearing on the screen

As a beginner in web design, I am experimenting with using font awesome icons in Angular 9 projects within list items. While some of the icons are displaying properly, others are not. You can see the issue in the attached image. To access the icons, I have ...

Passing a string to a function in AngularJS through ng-click

How can I pass a string to a function using ng click? Here's an example: HTML <a class="btn"> ng-click="test(STRING_TO_PASS)"</a> Controller $scope.test = function(stringOne, stringTwo){ valueOne = test(STRING_TO_PASS); } Edit - ...

Tips for concealing labels until the submit button is activated

I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...

Issue encountered while retrieving the initial element using .parent().search('img').eq(0)

I'm trying to extract an 'img' element inside an 'a' tag, but unfortunately, I'm having trouble achieving this. Here is the HTML code: <table class="table table-bordered"> <thead> <tr> ...

Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the ...

The child element is bigger than its parent due to the maximum height set. There is no visible overflow

My goal is to create a parent element with a maximum height, and have a child element fill this parent. If the content in the child exceeds the parent's dimensions, a scrollbar should appear. I attempted to achieve this by: div.parent { max-hei ...

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: https://i.sstatic.net/RL3w4.gif I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for th ...

Choose the sequence in which CSS Transitions are applied

Currently facing an interesting challenge, but I'm confident there's a clever solution out there. The issue at hand is with a table that has three different sorting states for its columns: unsorted, where no icon should be displayed, ascending, ...

PHP/CSS: Backgrounds for DIVs have been implemented, but they appear to be transparent

Update: Check out the link for some old photos here: I have a PHP file where I am creating divs with images as backgrounds using the code below (within a while-loop): echo ' <div class="pic" style="background:url('.$directory.'/'.$ ...

Creating Widgets with the help of CSS3 and HTML5

I am truly fascinated by the capabilities of HTML5 and CSS3 working together, and it's common knowledge that they require a browser to function. However, I'm curious if there is a way to create Desktop Widgets or Apps using HTML5, CSS3, and Java ...

Unpredictable hues in a headline

Can the text in an H1 tag have each word appear in a different random color, and then refresh to show new random colors? I have 5 specific colors in mind that I'd like to use. How would I go about coding this? ...

Employing HTML and CSS to restrict the number of characters in sentences

Extracting a few sentences from a JSON file and displaying it in a <p> tag. <p> Thank you all for another wonderful night spent together this past Sunday at The Hippodrome in Baltimore. Thank yo... <p> I want to f ...

Experiencing difficulties when trying to connect a subdirectory in Angular and encountering an error

My Angular site has a page with a link that leads to #admin/editCourse. <li><a href="#admin/editCourse" data-toggle="tab">Edit Course Info</a></li> However, when I click the link, Javascript (JQuery) throws an error: Syntax erro ...

Tips for aligning content vertically in bootstrap 4

Looking to vertically center content in Bootstrap 4? <div class="container"> <div class="content"> <div class="row"> <div class="col-6 align-middle" ...

How can the dropdownlist CSS be modified when it is clicked or hovered over?

I recently came across a solution on how to enable a disabled dropdown list when clicked at . I attempted to implement this and added a grey background to the disabled selection. However, I encountered an issue where the background of the dropdown list re ...

Apache server is failing to perform HTML encoding

Currently working on a PHP code where a method is returning text to display an image. Here is the snippet of the code: $ret = "<div align=\"center\">" . "<image src=\"" . "${webserviceDir}Graph.php?usr_id=" . urlencode($usr_ ...

Make the child element's width equal to the parent element's height using only CSS

Is it possible to make the width of a child-div match the parent-div's height using only CSS? Check out this JsFiddle Demo Typically, I would use jQuery like this: $("#child-div").width($("#child-div").parent().height()); But I really need to ac ...

Issue with rollover button function in Firefox and Internet Explorer when attempting to submit

I have created a rollover submit button using HTML and JavaScript: <input type="image" id="join" name="join" src="images/join.png" value="join"> My JS code implements the rollover/hover effect: <script type="text/javascript" charset="utf-8"> ...

What are some ways to style CSS for links, such as a login button?

Check out this website You may have noticed the login button with a stylish black background created using CSS. How can I achieve a similar look? Some buttons are PHP statements while others are simple play links. I also need the register, lost password, ...

The function is not recognized in C# programming language

Whenever I try to trigger functions by clicking buttons, nothing seems to happen and an error message appears in the console. Uncaught ReferenceError: AddressInputSet is not defined at HTMLButtonElement.onclick I'm new to this and could use ...