Мобильный рендеринг отличается от настольного ⇐ CSS

[Anonymous]

У меня есть CSS для моей кнопки, который анимируется, как и ожидалось, на настольном компьютере, но по какой-то причине не транслируется в мобильный Интернет и вызывает некоторые странные проблемы с ограничивающей рамкой и фоном. Честно говоря, я не знаю, как описать, что именно происходит, но посмотрите сами:
[img]https://i. sstatic.net/Wief79sw.png[/img]

анимационное видео на рабочем столе
[img]https:// i.sstatic.net/JQSGUn2C.png[/img]

мобильное анимационное видео
Ниже приведен код и код для редактирования в реальном времени!< /p>

Код: Выделить всё

💬
Chat

Код: Выделить всё

.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
Спасибо, что проверили!

Подробнее здесь: https://stackoverflow.com/questions/790 ... an-desktop