Weird CSS behavior when using visibility: hidden. Is that defined in a spec?

Question

I'm using the latest Chrome 35.

My understanding from the CSS Keyword visibility is that visibility: hidden simply doesn't render the element including all child elements while keeping it in the document flow.

Now while I debugged an existing application I stumbled over the following weird behavior. The parent element (parEl) is set to visibility: hidden and has two child elements (childA, childB). The element childA has it's visibility set to visible. From what I thought up until today was, that nothing should be visible, yet childA is actually displaying.

I don't know, is that a browser bug or actually intended behavior and if it is, where is this specified?

JSFiddle here: http://jsfiddle.net/7Yev6/

Answer 1

Although this behavior seems counter-intuitive, it is in fact the intended behavior. This is stated in the propdef for visibility:

hidden
The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

The behavior you might expect where descendants are hidden comes from the fact that they inherit the visibility: hidden value from their container by default when the property is not specified directly.

Note that visibility and opacity differ in that opacity is not inherited, but instead the effect opacity has on an element also applies to its descendants and cannot be reversed (which means if you had opacity: 0 on the parent, opacity: 1 will not cause its children to be fully opaque).

Answer 2

The property is inherited by child elements by default, but doesn't apply to them.

See http://www.w3.org/wiki/CSS/Properties/visibility