CSS "visiblity" is not enforced in children.

In YUI3 and may be other JavaScript widgets its common to set visibility:hidden CSS property on elements while the are being rendered. However this property is not 100% full-proof to hide the underlying content.

Consider the following:

<div>
    Container
    <div style="visibility:hidden">
        Widget
        <div style="visibility:visible">Button</div>
    </div>
</div>

I would inspect that Button div element would not be displayed. This is not the case:

Container

Widget

Button

You see - Widget div is hidden, but Button div is shown.

The visibility property is not enforced on children that is.

The solution

If you are developing a widget, like the Button widget above and prefer to hide it while rendering, change visibility to inherit when you want to show it back. This way your parent can still control when to display your widget.

If you have such a misbehaving widget and just want a workaround - use display:none to hide it. It will 100% do the work, although this approach it not always optimal. I.e. the browser usually will not actually render none-displayed content at all until its revealed.