Here are screenshots of the two fiddles.

Deleted: bad-fiddle.png 1.6 KB

	bad-fiddle.png 1.6 KB View Download

Deleted: good-fiddle.png 2.1 KB

	good-fiddle.png 2.1 KB View Download

I couldn't reproduce this on Linux M59 + ToT:

Deleted: svg_content_shell_tot.png 1.9 KB

	svg_content_shell_tot.png 1.9 KB View Download

Thanks for looking at it.

Something is odd. I just tried the fiddle on another Mac also running Chrome 59 and it renders like it does in your screenshot. I restarted my machine to see if it was a passing issue, but the problem remains.

Any suggestions on what I might be able to look at which might give a clue would be welcome.

Both systems are running OS X 10.10.5. The one which displays bad is a MacBook, and the one which displays like your version is a Mac Mini running OSX Server.

Another question I have is why the bottom section is black in https://jsfiddle.net/Harbs/rbxaw6oe/1/ (when it works), but blue in https://jsfiddle.net/Harbs/rbxaw6oe/2/.

I would not have thought that nesting it in an SVG would effect the interaction with the background. Is that as designed?

Could you try disabling GPU/hardware acceleration (if it is enabled) and see if this makes for more consistent rendering?

As for why /1/ and /2/ differs I don't know - that seems like a bug. Probably related to what is considered to be the isolating group. (Probably worthy of a bug of its own to avoid confusing issues here.)

You can try using the 'isolation' property ("isolation: isolate") to workaround some of this. (It seems adding it to the outermost <svg> in /1/ will make it render [blend] the same as /2/.)

Some Macs also have different compositor layering behavior in my experience. Maybe we're hitting one of those issues. I also cannot reproduce on M-60 or M-61 on a MacPro mid-2012 model.

I am seeing it on MacBook Pro (Retina, 15-inch, Late 2013)
CPU: 2.6 GHz Intel Core i7
Memory: 16 GB 1600 MHz DDR3
Graphics: Intel Iris Pro 1536 MB

Disabling hardware acceleration does in fact cause it to render like the screenshot in comment 3.

Thanks for the tip about isolation. Not only does it make it blend the same as /2/, it's also a work-around the issue on my machine:
https://jsfiddle.net/Harbs/rbxaw6oe/3/

Thank you for providing more feedback. Adding requester "schenney@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

The bug is related to HW rendering, so passing to teams that might have some insight on what is going wrong.

I can also reproduce this bug on a MacBook Pro (Retina, 15-inch, Mid 2015)

Processor: 2.2 GHz Intel Core i7
Memory: 16 GB 1600 MHz DDR3
Graphics: Intel Iris Pro 1536 MB

userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"

The tip with isolation also worked for me :) thank you!

The NextAction date has arrived: 2017-07-17

This seems like a gpu raster issue.  Sending to Skia.

Tested the issue on Mac os 10.12.5 (sierra and retina) using chrome stbale M60 #60.0.3112.78 and canary M62 #62.0.3168.0 and unable to reproduce the issue.

Attached screenshot for reference.

@harbs-- Could you please check if you can reproduce the issue in latest stable and update us with your observations.

Thanks!

Deleted: 738810.png 100 KB

	738810.png 100 KB View Download

60.0.3112.78 looks good!

Side question: Why does the blending lighten the black border in /1/ but not in /2/ and /3/? Is that expected behavior?

Firefox displays /1/ differently while Safari displays the same.

Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

In case I wasn't clear Safari behaves the same as Chrome while Firefox does not blend the black line. Firefox also does not blend it with the white background.

@#15, I think that's a bug. (Speculating as to the cause, maybe it's caused by different sizes of render targets or something like that... so sampling on the black border still works, but doing so outside it doesn't.)

As per comment#15,Able to reproduce the issue on Mac 10.12.6, Windows 7 & ubuntu 14.04 on chrome stable#60.0.3112.90 & Canary#62.0.3178.0  as below:

1. https://jsfiddle.net/Harbs/rbxaw6oe/1/ ---shown 2 bottom black blocks
2. https://jsfiddle.net/Harbs/rbxaw6oe/2/----shown 2 bottom black blocks but observed Good behavior on stable & Canary but 
3. https://jsfiddle.net/Harbs/rbxaw6oe/3/ --- Good behavior as expected

Observed the same behavior from M45 & hence marking it as Untriaged to get more inputs from dev.Please find the screencast for reference.
Thanks..!

Deleted: 738810-Mac.mp4 645 KB

	738810-Mac.mp4 645 KB View Download

Closing this. The blending issue at the border is not something we are going to fix under these circumstances.