Firefox中Gooey CSS SVG滤镜实现圆角文本背景失效求助

我尝试复刻Dribbble设计中的圆角文本背景效果，采用Gooey滤镜实现后，Chrome浏览器可以正常呈现内圆角效果，但Firefox中文本换行后的内边缘显示为尖锐状态，无法正常工作。已知Gooey效果有更新的实现方案，但不知道如何将其应用到这个文本示例中，以实现跨浏览器的内圆角效果。

我的实现代码 #

HTML代码 #

<p>I just want to smile and live life and enjoy every moment while I still have it.</p>

<svg style="display: none">
  <defs>
    <filter id="gooey-filter">
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="7.5"/>
      <feColorMatrix in="blur" result="colormatrix"
        type="matrix"
        values="1 0 0 0 0
                0 1 0 0 0
                0 0 1 0 0
                0 0 0 58 -9" />
      <feBlend in="SourceGraphic" in2="colormatrix"/>
    </filter>
  </defs>
</svg>

CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

body {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 3em;
  margin: auto;
  margin-top: 50px;
  max-width: 25ch;
}

p {
  display: inline;
  position: relative;
  padding: 0.5em;
  line-height: 1.3;
  background: #D1FB96;
  border-radius: 30px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  filter: url('#gooey-filter');
}

span:focus {
    outline: 0;
}

内容的提问来源于stack exchange，提问作者Candide x Media