SVG layers don't multiply (mix-blend-mode) with the background image
Reported by
dujmov...@gmail.com,
Aug 8
|
||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36 Steps to reproduce the problem: 1. create a parent div and set a background image 2. put an svg layer within the div (step 1) and set mix-blend-mode: multiply; opacity:0.9 3. observe What is the expected behavior? The SVG layers should multiply with the background image. What went wrong? The mix-blend-mode property doesn't seem to have any effect in Chrome, as changing to screen, overlay, darken, etc doesn't produce any result (change). Did this work before? Yes first reported issue was on June 22 2018 Does this work in other browsers? Yes Chrome version: 68.0.3440.84 Channel: n/a OS Version: 10.0 Flash Version: The multiply effect worked in Chrome until June 22 2018
,
Aug 9
dujmovicv@ - Thanks for filing the issue...!! Could you please provide any sample test file/url to test the issue from TE-end. This will help us in triaging the issue further. Thanks...!!
,
Aug 9
Sure, here is the link where the application is being tested: http://globalartnet.org/colorizerpro/home/eave1 Thanks!!!! :)
,
Aug 9
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Aug 9
This regressed with SPv1.75. This breaks functionality in a way that cannot be worked around to my knowledge. Hence it's a P1 Stable Regression. Needs a fix. dujmovicv@, if you already have a reduced test case could you provide it to us to save some time.
,
Aug 9
I don't have one, but I will gladly create it. Any gidelines how to do that please?
,
Aug 9
I just created a test case attached here.
Now mix-blend-mode works for div but not svg, so a simple workaround is to insert <div style="mix-blend-mode: multiply"> between the <svg> and the parent div:
<div id="bulding_area" class="building_area_eave_1">
<div style="mix-blend-mode: multiply">
<svg ...>
...
</svg>
</div>
</div>
,
Aug 10
Able to reproduce the issue on Windows 10, mac 10.13.3 and Ubuntu 17.10 using chrome reported version #68.0.3440.84 and latest canary #70.0.3516.0. Bisect Information: ===================== Good build: 67.0.3371.0 Bad Build : 67.0.3372.0 Change Log URL: https://chromium.googlesource.com/chromium/src/+log/63667eca2a1d86f5de61f29c7c5c6417cc351757..3a3c78a924a686ed0d3f90d765b00cdd78453e11 From the above change log suspecting below change Change-Id: I04177ada5d6b133fe47c0e0dbff42b6989f099ba Reviewed-on: https://chromium-review.googlesource.com/938562 wangxianzhu@ - Could you please check whether this is caused with respect to your change, if not please help us in assigning it to the right owner. Thanks...!!
,
Aug 10
Removing Target-68 and lowering priority because we have easy workaround of the issue.
,
Aug 10
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36 commit 8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36 Author: Xianzhu Wang <wangxianzhu@chromium.org> Date: Fri Aug 10 19:55:20 2018 [PE] Allow blending for svg root etc. Bug: 872437 Cq-Include-Trybots: luci.chromium.try:linux_layout_tests_slimming_paint_v2;master.tryserver.blink:linux_trusty_blink_rel Change-Id: Idb0d69320ddfa2dcfe02e493cd117573618459d5 Reviewed-on: https://chromium-review.googlesource.com/1169624 Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Cr-Commit-Position: refs/heads/master@{#582299} [delete] https://crrev.com/a2ce72e4384ec85ce4730dad11aa59469272060e/third_party/WebKit/LayoutTests/css3/blending/svg-blend-not-allowed-expected.html [delete] https://crrev.com/a2ce72e4384ec85ce4730dad11aa59469272060e/third_party/WebKit/LayoutTests/css3/blending/svg-blend-not-allowed.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/css3/blending/svg-blend-tspan-expected.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/css3/blending/svg-blend-tspan.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/external/wpt/svg/render/reftests/blending-svg-foreign-object-ref.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/external/wpt/svg/render/reftests/blending-svg-foreign-object.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/external/wpt/svg/render/reftests/blending-svg-root-ref.html [add] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/WebKit/LayoutTests/external/wpt/svg/render/reftests/blending-svg-root.html [modify] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/blink/renderer/core/layout/layout_object.h [modify] https://crrev.com/8a5a0362ca70fe20e8473f1dc720c86f3eb1bc36/third_party/blink/renderer/core/paint/paint_property_tree_builder_test.cc
,
Aug 10
This is regressed in M67, hence not a blocker for M69 + workaround is available per comment #9. Pls target fix for M70.
,
Aug 13
|
||||||||
►
Sign in to add a comment |
||||||||
Comment 1 by vamshi.kommuri@chromium.org
, Aug 9