神祕的額外字母空間出現在文字中

我有一個環境特定的CSS問題，我試圖糾正。當我在Chrome中測試時，一切正常。但是，在我們的應用程序使用的環境中（基於Chromium），當元素獲得焦點時，「Comedy」一詞顯示爲「Comyy」。您可以將此元素設想爲與您在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的全部數量，而只是當按鈕集中時處於活動狀態。

來源

2017-02-13 Joshua Dannemann

你能提供一個plunker/jsfiddle嗎？ – Corvusoft

我可以，但這可能不會重現此問題。它似乎只發生在我們用於應用程序的自定義瀏覽器中。我希望別人可能遇到過類似的問題，並知道如何解決它。 –

@JoshuaDannemann不會是這個自定義瀏覽器的問題，而不是你的代碼？然而，我確實遇到過類似的事情，結果是瀏覽器呈現自定義字體的問題。你使用任何特殊的字體嗎？ – zgood

非常感謝zgood提示它可能是導致問題的自定義字體。經過標準字體測試後，它不再是一個問題。但是，CSS中的錯誤來自以下內容：

transform：scale（1.1325）;

將上述內容更改爲：

transform：scale（1.1）;

即使仍然使用自定義字體，也會正確縮放圖像中的文本。

來源

2017-02-13 22:05:37

神祕的額外字母空間出現在文字中

回答

相關問題