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:
You see -
Widget div is hidden, but
Button div is shown.
The visibility property is not enforced on children that is.
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.