不思議な余分なスペースが単語で表示される

Question

私は、修正しようとしている環境固有のCSSの問題があります。 Chromeでテストすると、すべて正常に動作します。しかし、アプリケーションが使用する環境（Chromiumに基づく）では、要素が重視されるときに「Comedy」という単語が「Comedy」と表示されます。この要素は、Netflixアプリケーションで表示される可能性のあるポスターと同様に想定できます。内のテキストは、選択された四角形ボックスが拡大されて輪郭が描かれた中央の中央に揃えられます。余分な文字スペースが表示される問題は、要素にフォーカスがある場合にのみ表示されます。

.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。これは、CSSの完全な量ではなく、ボタンがフォーカスされているときにアクティブなものだけです。

Answer 1

問題を引き起こすカスタムフォントである可能性があることを示すzgoodに感謝します。標準フォントでテストした後、もはや問題にはなりませんでした。しかし、CSSのバグは次のようなものでした。

変換：スケール（1.1325）;

これに上記の変更：

変換：スケール（1.1）。

は、カスタムフォントを使用していても画像内のテキストを適切に拡大縮小します。