Weird CSS behavior when using visibility: hidden. Is that defined in a spec?
css, html, visibility
Solution
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).
Problem
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/