Mix-blend-mode: странный (темп) черный фон во время SVG-анимации на Android

Question

Я вращаю несколько прямоугольников друг над другом, и их цвета взаимодействуют с помощью css's mix-blend-mode.

Во всех браузерах это нормально, но в Chrome на Android есть черный фон, который генерируется вокруг прямоугольника svg во время его вращения. Как только он встает на место, черный фон исчезает.

Ручка: 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});

Есть идеи как заставить его вести себя?

Answer 1

Хорошо, через 2 часа у меня есть решение....

Вот что не сработало, если вы хотите пойти по этому пути:

• непрозрачность: 0; заполнить непрозрачность: 1;
• enable-background: накапливать; на родительском элементе
• добавление белого прямоугольника шириной и высотой 100%
• установка большого белого обводки, установка обводки или игра с непрозрачностью обводки.

Что сработало, так это создание еще одного смешанного элемента где-то на странице. Даже не взаимодействуя с SVG в любом случае FFS!

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

Рабочая ручка: https://codepen.io/sashakevich/pen/qmGBBL