mix-blend-mode not blending with body element
Reported by
cal...@mbsystems.com.au,
Mar 23 2017
|
||||||
Issue descriptionBrowser Tests: Chrome/57.0.2987.110/Win 10: Fail Chrome/57.0.2987.110/Win 8.1: Fail Chrome/57.0.2987.110/Win 8: Fail Chrome/57.0.2987.110/Win 7: Fail Chrome/56.0.2824.87/Win 7: OK Firefox/52.0 (Stable)/Win 10: OK Firefox/53.0b1 (Beta)/Win 10: OK Firefox/54.0a2 (Aurora)/Win 10: OK What steps will reproduce the problem? (1) go to this page: http://mix-blend-mode-test.bitballoon.com/ (2) if the top box with "Body > self" inside it is blue then it's not blending correctly with the background. If it's pink then it is blending correctly. The box below it with the smaller box inside it shows whether mix-blend-mode is supported at all. The smaller box is blue when mix-blend-mode is not supported and white when it is supported. What is the expected result? An element with mix-blend-mode set to a mode other than normal should blend with the body element. Examples in the spec show an element blending with the body element: https://drafts.fxtf.org/compositing-1/#mix-blend-mode What happens instead? Elements with a non-normal blend mode is not blending with the body element. I have used BrowserStack to test a number of different browsers/versions/OSes. Unfortunately I do not have access to a payed account so I can only test the combinations provided with a free account :(
,
Mar 23 2017
This is broken in M57 before branch and Please find the bisect result : You are probably looking for a change made after 438297 (known good), but no lat er than 438298 (first known bad). CHANGELOG URL: https://chromium.googlesource.com/chromium/src/+log/3fddfc508938ba41dbaacebb204cbf45e6e99b83..cf97fd35cae7ca6fae58cff6eea2f6cc59716171 Note : I am just tagging this as release block stable based on the regression range, If his doesn't apply feel free to remove. I will check and update other platforms.
,
Mar 23 2017
Can repro on Mac 58. Bisect seems to be pointing to https://chromium.googlesource.com/chromium/src/+/cf97fd35cae7ca6fae58cff6eea2f6cc59716171%5E%21/. @trchen, could you take a look?
,
Mar 23 2017
Yeah this is across the platforms I am able to reproduce the issue on Windows 7,10, Mac OSX 10.12.3 and Linux with Chrome stable(57.0.2987.110), Beta(58.0.3029.33) and Canary(59.0.3049.0). I am not sure if this is applicable to Android if so trchen@ cab you please apply the lable.
,
Mar 23 2017
This involves some obscure CSS spec rules that are not well known by web developers. In fact, the element "Body > self" is blending correctly against both <html> and <body> element. The surprising fact is that both <html> and <body> should paint nothing! The used value of background property should resolve to 'none' for both. The two rules involved here are 1. root element steals <body>'s background if the computed value of its own is 'none'. 2. The canvas steals the root element's background, and the root element never paints background. [css3-background] However I read the spec again and found the stacking context defined by [css21] contradicts with the definition above: [css3-background]: The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. [css21]: The canvas is transparent if contained within another, and given a UA-defined color if it is not. [css3-background]: The root element does not paint this background again, i.e., the used value of its background is transparent. [css21]: The painting order for the descendants of an element generating a stacking context (see the 'z-index' property) is: 1. If the element is a root element: 1.1. background color of element over the entire canvas. 1.2. background image of element, over the entire canvas, anchored at the origin that would be used if it was painted for the root element. The question is that whether the red background you specified should be a part of the root stacking context. CSS3 says no while CSS2.1 says yes. Blink has been committed to CSS3 definition since 2 years ago. It needs some strong argument for us to switch back. [css3-background] https://www.w3.org/TR/css3-background/#special-backgrounds [css21] https://www.w3.org/TR/CSS2/zindex.html
,
Mar 24 2017
|
||||||
►
Sign in to add a comment |
||||||
Comment 1 by nyerramilli@chromium.org
, Mar 23 2017