Msedge inline svg sizing как flexchildren - preserveAspectRatio не соблюдается

Question

Я разрабатываю полностраничные веб-приложения React, и его сеточная структура состоит из флексбоксов внутри друг друга. Компоненты встроенные SVG. Все хорошо с Chrome, Firefox и Safari. Но с MsEdge я недавно обнаружил странное поведение, когда дело доходит до определения размеров и положения SVG (как flexChildrens) preserveAspectRatio="xMidYMid meet", кажется, ошибочно изменено на preserveAspectRatio="xMinYMin slice" или "... none "

С MSEdge, просто перейдите на

https://jsfiddle.net/chickboom/uhLrdzL1/

и измените размер рамки рендеринга (от широкого пейзажа до узкого портрета). SVG синие, а их контейнерный класс имеет красную рамку. Здесь вы можете найти желаемое поведение:

Пейзаж Нормальное поведение

Но это беспорядочно прыгает к этому:

Правильно SVG не уважает preserveAspectRatio="... встретить"

В портретном режиме то же самое, вот желаемый рендеринг:

Портрет Нормальное поведение

с переходами на:

Оба SVG (роза + матрица) не уважают preserveAspectRatio="... meet"

Все мои SVG разработаны таким образом:

<div class="unit_frame_right">
    <svg class="rose_frame_right" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100">
        <rect x="0" y="0" height="100" width="100" stroke="blue" fill="blue" fill-opacity="0.5"></rect>
        ...svg content...



.unit_frame_right{
  flex: 4 0 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-around;
  display: flex;
  font-size: 2vmin;
  max-height: 100%;
  max-width: 40%;
  }
      .rose_frame_right{
        max-height: 35%;
        max-width: 100%;
        flex: 35 0 0;
        }