Question

What does the style visibility:hidden do when applied to the html element? Does it have anything to do with the scrollbars, esp. in regards to IE7?

Background: Oracle Apex generates this code, and I’m trying to work out if it’s causing an issue with an intermittently hidden horizontal scrollbar in IE7:

<style> html {visibility:hidden;} </style>

Answer 1

Specifications

According to the spec, the visibility property should still affect layout. This implies to me that it should not affect scrolling if an element ends up causing scroll behavior. Also, any children set to visible should be visible within a hidden element.

---

Observed Behavior

Using this fiddle…

Firefox, IE 8-10, Opera

Makes visibility: hidden on the html element not render the body (as it should) but still shows some rendering of the html itself as it shows the background-color. As BoltClock noted in his comment, this actually may be expected, since the background of the html is (according to spec) to become…

“the background of the canvas and its background painting area extends
to cover the entire canvas.”

These browsers also allow elements set back to visible inside to show as the spec for visibility indicated, so the div is showing and can scroll.

Chrome and Safari

It does not render the background-color on the html, but it does allow the div to show and it shows the scroll bars. So Chrome is not propagating the background property to the canvas, presumably because its visibility was set to hidden.

IE7

The background-color for the html element does not render (like Chrome) but there are also no scroll bars showing up for the div element inside. This seems to indicate that it is not properly staying in the layout per the spec.

---

So it may be that the visibility: hidden property is part of your issue. Obviously, the background point relates not at all to your scroll issue, but does address the point of your overall question on how the property affects the html element.

In my opinion, the Chrome and Safari rendering would seem to be the most intuitive (what I might expect as a designer), as I would not expect the background-color to render (since the element is hidden), but at the same time, if I set a child as visible, then I would expect the browser to let me scroll on behalf of that child even if the html wrapper is set to visibility: hidden. However, whether the webkit browsers or the other browsers are closest to the spec is debatable, for as BoltClock noteed in his comment, the spec does not seem to indicate whether visibility on the html element should or should not affect the propagation of the background property).