在SVG中dropshadow内的某个元素上使用foreignObject时，当该元素在Chrome和Safari上正常工作时，该元素不会在Safari上正确显示和缩放。

这是我的SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 375 666">
  <!-- ... -->
  <g transform="translate(186.7810034751892,0)">
    <foreignObject y="0" width="145" height="62">
      <div class="wrapper">
        <div class="element">
          <span>Some text</span>
        </div>
      </div>
    </foreignObject>
  </g>
  <!-- ... -->
</svg>

和我的CSS代码：

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.element {
  min-height: 24px;
  max-width: 130px;
  background-color: #C4E7EE;
  border-radius: 4px;
  padding: 4px;
  color: #0A99B7;
  filter: drop-shadow(0px 2px 4px rgba(128,128,0.4)); /* The problematic drop shadow */
  margin: 12px;
}

移除阴影时，该元素将放置在正确的位置和比例。您可以在此JSFiddle上尝试：https://jsfiddle.net/odv3bh9j/

目前，我已经通过删除阴影找到了以下解决方法：

@media not all and (min-resolution:.001dpcm) {
  @supports (-webkit-appearance:none) and (display:flow-root) {
    .element {
      filter: unset;
    }
  }
}

但是我想知道是否有更好的解决方案？