UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.79 Safari/537.36

Steps to reproduce the problem:
1. Create an inline SVG, including 2 overlapping layers
2. Add a class to the top layer that includes a mix-blend-mode property
3. The top layer renders as it wouldn't have a mix-blend-mode property

What is the expected behavior?
In the attached test file a line should be rendered that is partially gray. Also a gray box should be rendered.

What went wrong?
The path is indeed partially gray but the gray box was not rendered. Instead the background is just white.

Did this work before? No 

Does this work in other browsers? No
 Tested on the following Browsers:
- Firefox: OK
- Chrome (61, 63, Chromium): FAIL - workaround works
- Opera: FAIL - workaround works
- Edge: FAIL
- MSIE 11: FAIL

Chrome version: 61.0.3163.79  Channel: stable
OS Version: OS X 10.12.6
Flash Version: 

There is a simple workaround (which also works in Opera):
Adding a non-SVG element with any mix-blend-mode will trigger a correct mix-blend-mode rendering inside the SVG.
 

Deleted: svg-mix-blend-mode.tar.gz 2.0 KB

svg-mix-blend-mode.tar.gz 2.0 KB Download