All geek questions in one place

Strange CSS behavior when using visibility: hidden. Is this defined in the specification?

I am using the latest Chrome 35.

My understanding of the visibility of the CSS keyword is that it visibility: hiddensimply does not display the element containing all the child elements, storing it in the document stream.

Now that I was debugging an existing application, I came across the following weird behavior. The parent element (parEl) has a value visibility: hiddenand has two children (childA, childB). The childA element has visibility visible. From what I came up with so far, nothing should be visible, but childA is actually displayed.

I don’t know if this is a browser error or actually intended behavior, and if so, where is it indicated?

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

+4
source share
2 answers

Although this behavior seems to contradict intuition, it is actually intended behavior. This is specified in propdef forvisibility :

hidden
The created box is invisible (completely transparent, nothing is drawn), but it still affects the layout. In addition, the descendants of the element will be visible if they have: visible.

The behavior you can expect when hidden descendants are hidden is because they inherit the value visibility: hiddenfrom their default container when the property is not directly specified.

, visibility opacity , opacity , opacity ( , opacity: 0 , opacity: 1 , ).

+9

Source: https://habr.com/ru/post/1548491/

More articles:


All Articles