Mobile rendering different than desktop

I have some CSS for my button that animates as expected on desktop, but for some reason does not translate to mobile web, and causes some strange bounding box / backdrop issues. Honestly, I'm not sure how to describe what exactly is going on, but, see for yourself:

desktop animation video

mobile animation video

Below is the code, and a codepen to live edit!

<button class="styled-button" onclick="handleClick()">
  <span class="chat-icon">💬</span>
  <span class="chat-text">Chat</span>
</button>

.styled-button {
  position: relative;
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  height: 50px;
  margin-top: 24px;
  border-radius: 125px;
  background: linear-gradient(0deg, #000, #272727);
  border: none;
  cursor: pointer;
}
body {
    margin: 0;
    padding: 0;
    background-color: #000;
}
.styled-button::before,
.styled-button::after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  background: linear-gradient(45deg, #87def9, black, #87def9, black, #87def9, black, #87def9, black, #87def9, black);
  background-size: 400%;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  border-radius: 125px;
  z-index: -1;
  animation: steam 30s linear infinite;
}

.styled-button::after {
  filter: blur(20px);
}

.chat-icon {
  font-size: 24px;
  margin-right: 8px;
  color: white;
}

.chat-text {
  font-size: 16px;
  color: white;
}

@keyframes steam {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 200% 0;
  }
  100% {
    background-position: 0 0;
  }
}

https://codepen.io/dane456/pen/xxowYwX

Thanks for checking this out!!

EDIT: After further fiddling, it seems the filter: blur(10px is the source of the issue, as removing it gets rid of the translucent rectangle but obviously changes the effect. Will continue to explore and update here.

What I've tried to no avail:

1. Fiddling with a container and overflow
2. Forcing GPU rendering
3. Testing without hardware acceleration

Turns out the root of the issue is the mobile browser over-optimizing the animations, and not repainting as necessary.

The fix is admittedly a bit of a workaround, but it works perfectly - add an imperceivable animation that forces a repaint:

@keyframes steam {
  0% {
    transform: scale(1);
    background-position: 0 0;
  }

  50% {
    transform: scale(1.01);
    background-position: 200% 0;
  }

  100% {
    transform: scale(1.0);
    background-position: 0 0;
  }
}