Problem bei der Textwiedergabe auf Mobilgeräten ⇐ CSS

[Anonymous]

Auf Mobilgeräten sehe ich ein seltsames Problem mit dem „E“:


Ich habe eine JSFiddle und mein CSS angehängt.
https://jsfiddle.net/acme64xj/

Code: Select all

        * {
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;
}

Code: Select all

QUEEN