不透明度和文本阴影的奇怪行为

Question

我在Chrome尝试将不透明度设置为低于1时遇到问题，因为文字看起来与不透明度为1时的外观不同

Paragraphs with mixed opacity values http://www.gabrielecirulli.com/p/20111011-163614.png

在图片中，我将opacity: 0.5;设置在您可以看到的几个段落上。如果您注意到，字体与完全不透明的版本不同，并且在jQuery的淡入动画结束时，您可以清楚地看到从一个版本到另一个版本的步骤。这只发生在Chrome中，我认为这不是我第一次注意到它。

我试过复制一个段落，现在效果更加明显：

The same paragraph with two different opacity values http://gabrielecirulli.com/p/20111011-164436.png

当字体大小变大时，同样的事情不会发生。

以下是您可以看到的文字的CSS配置：

font-family: 'Tahoma', 'Verdana', 'Helvetica', 'Arial', sans-serif;
font-size: 13px;
color: #f4f4f4;

图片中选择的字体是Tahoma。文本有文字阴影问题：

text-shadow: 0px -1px 0px rgba(0, 0, 0, .5), 0px -1px 5px rgba(0, 0, 0, .2);

从CSS中可以看出，阴影应该只向上移动一个像素，但由于某些原因，正如您在图片中看到的那样，它也向左偏移了一个像素。同样的问题在Firefox中也不会发生。将水平距离设置为1px会使其距离当前位置移动2px，并且无法解决问题。

Answer 1

Chrome会在适用的情况下使用硬件加速的渲染层合成，这可能会导致渲染差异。这是具有不透明度（或其他部分半透明）元素的情况，例如具有阴影的元素。有关软件和硬件合成之间的区别以及有关该主题的更多详细信息，请参阅https://sites.google.com/a/chromium.org/dev/developers/design-documents/gpu-accelerated-compositing-in-chrome。