Issue with getting "gooey" CSS SVG filter for rounded text background to work in Firefox

Question

I was attempting to recreate the following rounded background effect found in this Dribble design:

Through some research, I found out that it was called the gooey effect. I tried to implement these [Text Background With Gooey Filter](Text Background With Gooey Filter) and Gooey text background with SVG filters, but they don't work on Firefox. I'm looking for that rounded inner corner effect that displays on Chrome.

Here is my attempt:

<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>

@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;
}

On Chrome-based browsers, it looks like this: (notice the rounded inner corner)

On Firefox, it looks like this: (sharp inner edges)

I'm aware that the gooey effect has been revisited, but I'm not sure how to implement the changes to a text-based example to get that rounded inner corner.

Here's my codepen

Answer 1

You just need to add an inner span with position: relative style.

<p>
  <span style="position:relative">
    I just want to smile and live life and enjoy every moment while I still have it.
  </span>
</p>