Mix-blend-mode: weird (temp) black background during SVG animation on android

Question

I'm spinning a few rectangles atop each other, and their colors interact with using the css's mix-blend-mode.

In all browsers it's fine, but on chrome on Android there is a black background that is generated around the svg's rectangle shape while it's rotating. Once it settles into position, the black background disappears.

Pen: https://codepen.io/sashakevich/pen/YVMmZV

html:

<svg id="sl_logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.94 62.8"><g id="mark"><rect id="bar-1" class="cls-1" x="20.04" width="12.1" height="56" rx="3.24" ry="3.24"/><rect id="bar-2" class="cls-2" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(0.5, 0.87, -0.87, 0.5, 37.29, -9.59)"/><rect id="bar-3" class="cls-3" x="20.9" y="0.5" width="12.1" height="56" rx="3.24" ry="3.24" transform="matrix(-0.5, 0.87, 0.87, 0.5, 15.5, -9.59)"/></g></svg>

css:

#bar-1, #bar-2, #bar-3 {
  mix-blend-mode:multiply;
}
#bar-1 {
  fill:#ed4237;
}
#bar-2 {
  fill:#29aae2;
}
#bar-3 {
  fill:#7ab642;
}

js

TweenMax.from("#bar-2", .35, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#bar-3", .7, {rotation:0, transformOrigin:"center center", delay:.4});
TweenMax.from("#letters", .7, {x:-40, opacity:0, transformOrigin:"left", delay:.4});

Any ideas how to get it to behave?

Answer 1

Ok, 2 hours later I have a solution....

Here's what didn't work in case you want to go down that road:

• opacity: 0; fill-opacity:1;
• enable-background: accumulate; on parent element
• adding a white rectangle of 100% width and height
• setting some large white stroke, setting no stroke, nor playing with stroke opacity.

What did work, was creating another blended element somewhere on the page. Not even interacting with the svg in any way FFS!

.blend-fix {
  mix-blend-mode:multiply;
}

Working pen: https://codepen.io/sashakevich/pen/qmGBBL