399564 - color setting on one element is bleeding into another element

Status: RESOLVED INVALID

(Core :: Graphics, defect)

Description

[John Daggett (:jtd)]

Attachment: testcase blending with opacity and rgba colors

In the attached page, the rgba color specified for one div is leaking into the color used another div that follows.

Steps:

Open the attached webpage.  There are two lines of text that begin with "Using...".  The first is rendered inside a div with color set to rgba(0,0,0,0.5).  The second is rendered in a div that should inherit the color setting from the body, it should be black.  Since the second div has opacity set to 0.5, the color of both text items should end up the same but it appears that the second one is blended twice.  

Explicitly adding color: black to the style for the second div corrects the problem.

I'm guessing that we're forgetting to restore opacity to 1.0 somewhere.

Comment 1

[John Daggett (:jtd)]

Attachment: testcase screenshot

Specifically, the h2 element contained in the div with id=blendlayer appears to be using color: rgba(0,0,0,0.5) rather than black, which should have been inherited from body.

Occurs also on Windows, so this is not a Mac only problem.

Comment 2

[John Daggett (:jtd)]

Argh, testcase is not valid HTML, div elements cannot be empty elements.  Replacing <div /> with <div></div> fixes the problem.