【发布时间】：2018-03-24 12:35:45
【问题描述】：
我使用的是 Bootstrap 4。但是打开下拉组件时，字体颜色略有变化。
在寻找一些可能是问题的颜色定义后（没有），我发现了一些奇怪的东西：当我禁用下拉元素的 transform 和 will-change 属性时，字体颜色会以某种方式受到影响.在这里看视频：
https://www.dropbox.com/s/xkhl4m6enwvdzcd/Video%20color%20bug.mov?dl=0
在 Google Chrome 和 Cinema Display（视频）中最为明显。
似乎亚像素字体渲染受到影响： see screenshot here。 有趣的是：字体颜色在关闭时渲染得更准确。
在 Safari 中也会出现字体渲染问题...
知道这里发生了什么吗？
（我可以发布一个代码笔，或者在视频中查看它的 ID。）
【问题讨论】：
-
据我所知，
transform和will-change可以让浏览器使用 GPU 渲染（而不是 CPU），这对于动画等效果更好。但是看不到颜色的变化你的例子。你说的变色是什么意思？color财产？变化有多大？ -
字体颜色不同是因为没有亚像素渲染，亚像素渲染消失是因为元素是通过单独的复合层渲染的（即上面提到的GPU渲染）。我不知道如何为此类元素“打开”亚像素渲染。
-
@giovannipds 在视频中查看左下角框中的文本。当“will-change”处于活动状态时，蓝色会发光。视频质量不是那么好，但在 Chrome 和 Cinema Display 上“实时”观看时，它非常令人不安。
-
giovannipds 和@ilya-streltsyn：感谢您的解释。至少现在我知道了……干杯！我还发现在其他显示器上几乎不明显，仅在屏幕截图中，您可以看到子像素渲染已关闭。
标签： html css twitter-bootstrap google-chrome font-rendering