Why does Google Chrome round all svg icons during animation with mix-blend-mode: multiply?

Question

On hover, only the green svg icon (first) should smoothly change its opacity to 1. But instead, in Google Chrome (tested on 97 and 99 version), all other svg icons inherit border-radius: 25px; for the duration of the animation, although this is not provided by anything.

.wrapper {
  display: flex;
  will-change: opacity;
  overflow: hidden;
  border-radius: 25px;
  background: #ccc;
}

.wrapper:hover .first {
  opacity: 1;
}

.first {
  opacity: 0.5;
  background: green;
  transition: 0.5s color ease-in-out, 0.5s opacity ease-in-out;
}

.second {
  mix-blend-mode: multiply;
  background: red;
}

.third {
  mix-blend-mode: multiply;
  background: blue;
}

<div class="wrapper">
  <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="first"/>
  <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="second"/>
  <svg width="50" height="50" xmlns="http://www.w3.org/2000/svg" class="third"/>
</div>

Example on gif:

Deleting will-change: opacity; makes this bug more strange:

Only deleting mix-blend-mode: multiply; resolve this bug:

Why it happend? How to fix it?

This bug does not reproduce on FireFox and Safari.

UPD: Created issue here: https://bugs.chromium.org/p/chromium/issues/detail?id=1304627