1291309 - Transitioning the opacity on a child element ignores the parent element's opacity during animation when the CSS font-size attribute has a value of 0

Status: RESOLVED DUPLICATE of bug 1395151

(Core :: Layout, defect, P3)

Description

[o.gaertner]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Build ID: 20160623154057

Steps to reproduce:

While creating indicators for a slideshow widget I noticed this odd behaviour during the CSS transition. The controls it's a part of is supposed to stay partially transparent until hovering over the slider and the indicators started flickering as soon as it set the parent element's opacity to 0.5 for its default state.

I created a pen that replicates this behaviour:
http://codepen.io/anon/pen/ZOryPr

The upper line of squares transitions all fine while the lower line with "font-size: 0;" does not.


Actual results:

During the transition of the elements whose parent has font-size set to 0, the child element uses its actual opacity-value and appears much more opaque than it is supposed to be. (lower row of squares)


Expected results:

The transition should take the parent's opacity into account and fade accordingly, as is the case when no "font-size: 0" is present. (upper row of squares)

Comment 1

[Hiroyuki Ikezoe (:hiro)]

Does this still persist on firefox 58 beta or nightly?  I guess this has been fixed by bug 1395151.

Comment 2

[o.gaertner]

No, it does not. It indeed appears to have been fixed, using the Developer Edition version 58.0b16

Comment 3

[Hiroyuki Ikezoe (:hiro)]

Thanks for the quick reply!