Android Chrome多行文字陰影渲染與模糊

當涉及到文字陰影渲染與大字體化和模糊時，我經歷了Android（6.0.1）Chrome瀏覽器（54.0.2840.68）中的一個奇怪的錯誤。據報道，它也出現在MacOS Chrome中，但我無法複製它。Android Chrome多行文字陰影渲染與模糊

我濃縮成問題作進一步調查一小筆： http://codepen.io/quarkus/pen/BQaBGj

這一點，在很短的風格的標題我試圖渲染。

h1 { 
    font-family: sans-serif; 
    text-transform: uppercase; 
    font-size: 60px; 
    margin: 0; 
    color: white; 
    line-height: 1.2; 
} 

h1.shadow { 
    text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1); 
}

.filter，.fix3d和.fix是這些類只是試圖通過在3D渲染上下文頭條（或通過創建影子作爲模糊：前），以解決這個問題。

這是它的外觀的大多數Android設備：

s.codepen.io/quarkus/debug/BQaBGj on the device

有沒有人經歷過那種渲染的，可以指向我一個解決方案嗎？

感謝馬庫斯

編輯：忘了一兩件事。它只有在頁面被用戶本身「縮放」時纔會發生，或者通過像下面這樣的meta標籤來標記頁面： <meta name="viewport" content="width=device-width, initial-scale=1"> 就像它在筆中一樣。

來源

2016-11-09 mr_quok

我在https://businessimages.ch（右上方）遇到同樣的問題。這似乎只發生在某些版本的Chrome/Android上，因爲我在我辦公室的兩臺不同設備上進行了測試。它確實發生在最新的三星Galaxy 7上，我假設它是最新版本的Android。我確實有元視口標記集（但在我的情況下，這不是一個解決方案）。任何信息都會很棒！ – ynamite

我肯定會在Browserstack設備（Galaxy和Nexus手機）上獲得此設備，但我沒有在設備上看到它，但我沒有大量設備需要檢查。

但是什麼固定它，我正在改變和阻擋的文字：

.text { 
    transform: translateZ(0); 
    display: inline-block; 
}

不是一個很好的修復，因爲我需要我的文字display: inline，但它的工作原理。

來源

2017-03-21 16:25:17

Android Chrome多行文字陰影渲染與模糊

回答

相關問題