Mysterious Extra Leerzeichen in den Wörtern

Ich habe ein umgebungsspezifisches CSS-Problem, das ich versuche zu korrigieren. Wenn ich in Chrome teste, funktioniert alles einwandfrei. In der Umgebung, die unsere Anwendung verwendet (basierend auf Chromium), erscheint das Wort "Comedy" jedoch als "Com edy", wenn das Element den Fokus erhält. Sie können sich dieses Element ähnlich wie ein Poster vorstellen, das auf einer Netflix-App angezeigt wird. Der Text in der Mitte ist auf ein rechteckiges Rechteck ausgerichtet, das nach der Auswahl vergrößert und umrandet wird. Das Problem mit dem zusätzlichen Buchstabenraum erscheint nur, wenn das Element den Fokus hat.Mysterious Extra Leerzeichen in den Wörtern

.poster { 
    height: 117px; 
    width: 208px; 
    position: relative; 
    display: inline-block; 
    margin-right: 2px; 
    margin-left 3px; 
    margin-top: 0px; 
    margin-bottom: 2px; 
    white-space: normal; 
} 

.poster:focus { 
    z-index: 3; 
} 

.poster-content { 
    height: 100%; 
    width: 100%; 
} 

.poster:focus .poster-content { 
    -webkit-transform: scale(1.1325); 
    transform: scale(1.1325); 
    border: 2px solid #0a141a; 
    outline: 5px solid #00629b; 
    box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.8); 
    position: absolute; 
    box-sizing: border-box; 
    overflow: hidden; 
    background-position: center; 
    background-repeat: no-repeat; 
} 

<div class="poster"> 
    <div class="poster-content" style="background-image: none;"> 
     <div class="poster-title">Comedy</div> 
    </div> 
</div>

PS. Dies ist nicht die gesamte Menge an CSS, sondern nur das, was aktiv ist, wenn die Schaltfläche aktiviert ist.

Quelle

2017-02-13 Joshua Dannemann

Können Sie einen Plunker/Jfiddle liefern? – Corvusoft

könnte ich, aber das wird wahrscheinlich nicht reproduzieren das Problem. Es scheint nur in einem benutzerdefinierten Browser zu passieren, den wir für die App verwenden. Ich hatte gehofft, dass jemand anderes schon einmal auf ein ähnliches Problem gestoßen wäre und weiß, wie man es beheben kann. –

@JoshuaDannemann wäre das nicht ein Problem mit dem benutzerdefinierten Browser und nicht Ihr Code? Ich habe jedoch etwas Ähnliches erlebt und es stellte sich heraus, dass es ein Problem damit war, wie der Browser eine benutzerdefinierte Schriftart rendert. Verwenden Sie spezielle Schriftarten? – zgood

Vielen Dank an zgood für den Hinweis, dass es sich um eine benutzerdefinierte Schriftart handeln könnte, die das Problem verursacht. Nach dem Testen mit einer Standardschrift war das kein Problem mehr. Der Fehler in der CSS stammt jedoch aus den folgenden:

Transform: Maßstab (1.1325);

Ändern der oben dazu:

Transformation: scale (1.1);

skaliert den Text im Bild richtig, auch wenn die benutzerdefinierte Schriftart noch verwendet wird.

Quelle

2017-02-13 22:05:37

Mysterious Extra Leerzeichen in den Wörtern

Antwort

Verwandte Themen