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>
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With