CSS屬性「will-change」會改變字體顏色（亞像素字體渲染）

我使用的是Bootstrap 4.但是當打開下拉組件時，字體顏色會稍微改變。CSS屬性「will-change」會改變字體顏色（亞像素字體渲染）

尋找一些可能是問題的顏色定義（沒有）後，我發現了一些奇怪的東西：當我禁用transform和will-change屬性的下拉元素時，不知何故font-color會受到影響。在這裏觀看視頻： https://www.dropbox.com/s/xkhl4m6enwvdzcd/Video%20color%20bug.mov?dl=0

它在Google Chrome和Cinema Display（視頻）中最引人注目。

此外，它似乎在子像素字體渲染受到影響： see screenshot here。有趣的事情：當它關閉時，字體顏色呈現得更加準確。

在Safari中的字體呈現問題也會發生......

任何想法，這裏發生了什麼？

（我可以張貼代碼筆，或看到它的ID在視頻）。

來源

2017-10-12 anbecode

代碼筆是https://codepen.io/anon/pen/mBjBvg – anbecode

據我所知，'transform'和'will-change'可以讓瀏覽器使用GPU渲染（而不是CPU），這是更好的動畫等，但看不到你的例子顏色變化。顏色變化是什麼意思？ '顏色'屬性？它有多少變化？ – giovannipds

出現不同的字體顏色是缺少子像素渲染的結果，並且子像素渲染消失，因爲該元素是通過單獨的複合層呈現的（即，如上所述在GPU中呈現）。我不知道如何「打開」這個元素的子像素渲染。 –

由於Ilya Streltsyn和giovannipds在評論here和here已經提到，這是alpha合成的正常副作用（子像素渲染），這是瀏覽器在will-change和transform帶來的硬件加速渲染（GPU）的一部分。

來源

2017-10-13 08:06:09 BoltClock

CSS屬性「will-change」會改變字體顏色（亞像素字體渲染）

回答

相關問題