Bug 287407 – opacity is not inherited from an inline parent with a block child

• Status: NEW
• Component: Layout and Rendering

Just like the title says..
Check the following code:
<a href="#" style="opacity: 0.5;"><div>Not translucent</div></a>
<a href="#" style="opacity: 0.5">This one is</a>


Version 18.3 (18620.2.4.111.8, 18620)
Also happens iOS 18.3

Tried in chrome and firefox, none have this problem.

[Ahmad Saleem]

Created attachment 474178 [details]
Reference Screenshot (Safari, Firefox and Chrome)

[Radar WebKit Bug Importer]

<rdar://problem/144985085>

[Karl Dubost]

Created attachment 474257 [details]
testcase

I found a couple of previous bug about the relations in between parents and children with regards to the opacity. 
I will be adding them to seeAlso: 
Bug 73161 
Bug 129480 
Bug 184915 
Bug 218895

This issue seems to have existed for a long time.

But this is happening in an inline parent / block children relationship.

[Karl Dubost]

Created attachment 474258 [details]
rendering in safari, firefox, chrome

These are the rendering on 
Safari Technology Preview  213          20621.1.11.111.1
Firefox Nightly            137.0a1       13725.2.13
Google Chrome Canary       135.0.7020.0  7020.0

[Karl Dubost]

this is the reason for the failures on
http://wpt.live/css/css-color/inline-opacity-float-child.html
http://wpt.live/css/css-overflow/overflow-inline-block-with-opacity.html
http://wpt.live/css/CSS2/stacking-context/opacity-affects-block-in-inline.html

[Karl Dubost]

@roseate
Does it affect a live website you would be working on?

@karl(In reply to Karl Dubost from comment #6)
> @roseate
> Does it affect a live website you would be working on?

First of all thanks for taking the time to look at such minuscule bug. Xd
And no, it doesn’t affect my website anymore. I had to change the logic of my code in order to get the desired effect. Basically I used divs with flex instead of spans.

(In reply to roseate.loris-2q from comment #7)
> @karl(In reply to Karl Dubost from comment #6)
> > @roseate
> > Does it affect a live website you would be working on?
> 
> First of all thanks for taking the time to look at such minuscule bug. Xd
> And no, it doesn’t affect my website anymore. I had to change the logic of
> my code in order to get the desired effect. Basically I used divs with flex
> instead of spans.

Sorry, after taking a look at my code, that's not what I actually did. I instead set the position of the child div as 'absolute' and aligned it where I wanted.

Something like this:

<a href="#" style="opacity: 0.5;"><div style="position: absolute; top: 30px">Now it's translucent</div></a>
<a href="#" style="opacity: 0.5">This one is</a>