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”会改变字体颜色（亚像素字体渲染）

回答

相关问题