CSS: mix-blend-mode = color-dodge not working in Chrome but okay in Firefox

Question

I am trying to use an effect where the same shape (SVG in my case) at different locations is overlayed, and its colors should be "color dodged". The shape is coming in the primary colors red, green and blue. Where all shapes meet, the color is white, and in other places combinations occur. I've created a pen at https://codepen.io/anon/pen/dgKQqz to demonstrate. In short, the styles:

body { background-color: #222; }
.demo { mix-blend-mode: color-dodge; }
.center { position: fixed; top: 50%; left: 50%; }
.pr { transform: translate(-30%, -50%); }
.pg { transform: translate(-80%, -50%); }
.pb { transform: translate(-50%, -30%); }

And the shapes:

<svg class="demo center pr" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#ff0000" />
</svg>
<svg class="demo center pg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#00ff00" />
</svg>
<svg class="demo center pb" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#0000ff" />
</svg>

This works as I expect in Firefox (62), but no mixing seems to take place in Chrome (70). The issue is not with SVG, as even regular text in a div element behaves like described.

Am I doing something wrong, can this be achieved so it works in both browsers, or is this a Chrome bug?

Answer 1

In fact using the SVGs as background-image is working:

.demo {
  width:100px;
  height:100px;
  mix-blend-mode: color-dodge;
}

body {
  background-color: #222;
}
.center {
  position: fixed;
  top: 50%;
  left: 50%;
}
.pr {
  transform: translate(-30%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0000' /%3E%3C/svg%3E");
}
.pg {
  transform: translate(-80%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%2300ff00' /%3E%3C/svg%3E");
}
.pb {
  transform: translate(-50%, -30%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%230000ff' /%3E%3C/svg%3E");
}

<div class="demo center pr"></div>
<div class="demo center pg"></div>
<div class="demo center pb"></div>