Inconsistencies in applying CSS mix-blend-mode [was: Webpage with css style "mix-blend-mode:hard-light' displayed incorrectly]
Categories
(Core :: Layout, defect)
Tracking
()
People
(Reporter: tryness, Unassigned)
Details
Attachments
(2 files)
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0
Steps to reproduce:
Open attached HTML file (mix-blend/mix-blend.html)
or
<!DOCTYPE html>
<style>
html { mix-blend-mode: hard-light; background: green; }
</style>
Actual results:
Even when the page with green background has 'mix-blend-mode:hard-light', it still displayed as green. (mix-blend/firefox-mix-blend.html)
Expected results:
When the page with green background has 'mix-blend-mode:hard-light', it should displayed as light green. (mix-blend/chrome-mix-blend.html)
|
||
Comment 1•2 years ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
|
||
Comment 2•1 years ago
|
||
The severity field is not set for this bug.
:jfkthame, could you have a look please?
For more information, please visit BugBot documentation.
|
||
Comment 3•1 years ago
|
||
I think this is related to the canvas onto which the root <html> element is painted having no background. The result in Safari looks similar to Firefox; only Chrome is different. It's unclear to me which result is "correct" here... I'm not that familiar with the Compositing & Blending spec.
Here's a further testcase which shows the dependency of mix-blend-mode on the background. With both Firefox and Chrome, in the left-hand column (where the outer <div> has no background, i.e. transparent), mix-blend-mode has no effect, while in the right-hand column (with white background), it works as expected.
Interestingly, in Safari mix-blend-mode does work in both columns (although it didn't apply in the reporter's original testcase).
Also interesting is that in Firefox, while mix-blend-mode has no effect on-screen in the left column, it does work there in the Print Preview panel.... sometimes, depending on the currently-selected printer.
This inconsistency seems troubling/unexpected....
|
|
||
Updated•1 years ago
|
Description
•