移动渲染与桌面不同

Question

我的按钮有一些 CSS，可以在桌面上按预期进行动画处理，但由于某种原因无法转换为移动网络，并导致一些奇怪的边界框/背景问题。老实说，我不知道如何描述到底发生了什么，但是，你自己看看：

桌面动画视频

手机动画视频

下面是代码，以及用于实时编辑的代码笔！

<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

感谢您查看此内容！！

编辑：经过进一步摆弄，似乎过滤器：模糊（10px是问题的根源，因为删除它会摆脱半透明矩形，但明显改变了效果。将在这里继续探索和更新。

我已经尝试过但无济于事：

1. 摆弄容器并溢出
2. 强制 GPU 渲染
3. 无硬件加速的测试

Answer 1

问题的根源是移动浏览器过度优化动画，而不是根据需要重新绘制。

该修复确实是一种解决方法，但它效果完美 - 添加一个难以察觉的动画来强制重新绘制：

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