Home/ Questions/Q 6986077
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:45:46+00:00

I’m having a problem with Chrome trying to set an opacity below 1 because

  • 0

I’m having a problem with Chrome trying to set an opacity below 1 because the text will appear different than how it looks when the opacity is 1

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

In the picture I’ve set the opacity: 0.5; on a few of the paragraphs you can see. If you notice, the font is different than the version with full opacity and at the end of jQuery’s fade-in animations you can clearly see the step from one version to another. This only happens in Chrome and I think it’s not the first time I notice it.

I have tried duplicating a paragraph and now the effect is even more noticeable:

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

The same thing does not happen when the font size is made bigger.

Here’s the CSS configuration of the text you can see:

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

The font picked in the picture was Tahoma. The text has a problem with text shadow:

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

As you can see from the CSS, the shadow should only go upward one pixel, but for some reason, as you can see in the pictures, it’s also offset to the left by one pixel. This same issue, again, doesn’t happen in Firefox. Setting the horizontal distance to 1px will move it 2px away from its current position and will not fix the problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Chrome uses hardware-accelerated render layer compositing whenever applicable, which can result in rendering differences. This is the case with opacity-enabled (or otherwise partially translucent) elements, like those with a shadow. See https://sites.google.com/a/chromium.org/dev/developers/design-documents/gpu-accelerated-compositing-in-chrome for the difference between software and hardware compositing and more details on the topic.

    • 0