Проблема с рендерингом текста на мобильном устройстве ⇐ Html

[Anonymous]

На мобильных устройствах я вижу странную проблему с буквой "E":


Я прикрепил JSFiddle и свой CSS.
/>https://jsfiddle.net/acme64xj/

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

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Helvetica Neue', Arial, sans-serif;
color: #fff;
overflow-x: hidden;
background: #000;
}

h1,
h2,
h3,
h4,
h5 {
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 200;
font-style: normal;
}

.album-title {
font-size: 10rem;
font-weight: 900;
margin-bottom: 2rem;
text-transform: uppercase;
letter-spacing: 2rem;
position: relative;
display: inline-block;
color: transparent;
-webkit-text-stroke: 2px #9d085e;
text-stroke: 2px #9d085e;
paint-order: stroke fill;
/* Add this */
}

.album-title::before {
content: 'QUEEN';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
color: #9d085e;
-webkit-text-stroke: 0;
overflow: hidden;
animation: fill-text 3s ease-in-out infinite;
paint-order: fill;
/* Add this */
}

@keyframes fill-text {

0%,
100% {
width: 0;
}

50% {
width: 100%;
}
}

.album-title {
font-size: 3.5rem;
letter-spacing: 1rem;
}

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

QUEEN

Подробнее здесь: https://stackoverflow.com/questions/797 ... ile-device