Фильтры SVG в Safari: x, y, ширина, высота не применяются

Question

Проблема:

• В Safari отображаются оба фильтра - но оба имеют полную ширину / высоту прямоугольника, поэтому виден только верхний.

Как мне заставить это работать согласованно во всех браузерах?

Демонстрация ошибки здесь: https://codepen.io/mknepprath/pen/mKeObo. Откройте в Chrome или Firefox, чтобы увидеть, как это должно выглядеть.Спасибо!

html:

<svg class='a'>
  <defs>
    <filter id='hey'>
      <feColorMatrix
        type='matrix'
        result='darken'
        values='.2 .05  .05 0 .35
                .05 .2  .05 0 .35
                .05 .05 .2  0 .35
                0   0    0  1 0'
      />
      <feColorMatrix
        in='SourceGraphic'
        result='node'
        x='5'
        y='5'
        width='90'
        height='90'
      />
      <feMerge>
        <feMergeNode in='darken' />
        <feMergeNode in='node' />
      </feMerge>
    </filter>
  </defs>
</svg>
<div class='b' style='filter: url(#hey)'></div>

css:

.a {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
}

.b {
  width: 200px;
  height: 100px;
  background: peachpuff;
}

Chrome & Firefox: Safari:

Answer 1

Многие функции фильтра не работают в Safari, когда вы применяете SVG-фильтр к HTML-контенту, используя ловушку CSS-фильтра.Похоже, вы нашли еще один случай этого.Если вы хотите продолжать делать это с фильтрами, делайте это полностью в SVG.