visuallyhidden sometimes cause a horizontal scrollbar on IE7

[tombigel]

Paul's note: the original visuallyHidden technique is from Jonathan Neal.. it's an iteration of research here http://www.webaim.org/techniques/css/invisiblecontent/ and it was first published here: http://j.mp/visuallyhidden

Below we encounter some edge case issues and revise it again.

I encountered an edge case when I used visuallyHidden on an element wider than the page in IE7.

I don't have a test case to show right now (I fixed the bug), but I'll try to describe it:

In a page header I had the following structure:

Example HTML:

<div id="container">
    <header>
       <img id="logo" ... />
       <nav> ... </nav>
       <h1 class="visuallyHidden"> ... Long Text ... </h1>
    </header>
    ...
    ...
<div>

Example CSS:

#container { width: 960px; }
header img { float:left }
header nav { float:right }

The result of this setup was that the hidden H1 (doesn't matter why is it hidden on this page) is floated after the nav element.
Because visuallyHidden applies position:absolute on the element, the text in the H1 does not break, and on IE7 only (Not even on IE6) it's origin is right after the nav menu and it widens the page and causes a horizontal scrollbar.

My immediate solution for this issue was to add left:0 to visuallyHidden, but if the text inside the H1 was a bit wider it would widen the page again.

I don't really understand why clip is better than other methods, before h5bp I used to use this:

.visuallyHidden { overflow:hidden; height:1px; margin-top:-1px; }
/* also, we can add position:absolute and a width */

and it worked perfectly. (for example, look for the the hidden accessibility links and hidden H2 headers on this old demo: http://tendu.tombigel.com)

[jonathantneal]

If we want to correct for every seemingly-reasonable possibility of overflow in every browser then we may want to consider.

.visuallyHidden {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

And I know !important is so ugly, but we're hacking here. There is no available property that would do what visibility: hidden; should probably do to begin with on screen-reading devices.

I've tested this class successfully in JAWS 12 and VoiceOver for Mac.

[tombigel]

why use "clip" if using all the rest?

[jonathantneal]

The 0 clipping will avoid the potential 1x1 visible pixel speck.

[tombigel]

This is why i use height:1px;margin-top:-1px;overflow:hidden; .
It seems to me like it fulfills the same purpose.

[jonathantneal]

We need position: absolute to remove the element's affect on the document flow. We need clip: rect(0 0 0 0) to remove the element's 1x1 pixel of visibility; test your method on an element with a background color (you can see, like black on white) and you will see a remaining 1x1 dot.

[tombigel]

Oh... never tested this with a background, you are right.

[paulirish]

reopening this so we can fix this in the css first...

[Laz75]

I had the same problem, but with Safari and Chrome (and IE9 too). In my case the element with the visuallyhidden class had some large width (set by a different selector) and that's what was causing the scrollbar. I could easily solve it adding a width: auto !important, but I see the solution proposed here seems to be much more complete.

[paulirish]

I feel very comfortable changing it to

position: absolute !important;  
width: 1px !important;  
clip: rect(0 0 0 0); 
padding: 0 !important;

• It lacks an !important on the clip, because who uses that.
• it drops the secondary clip, which i guess wasnt necessary, based on what jon pasted above? plz confirm, jon!
• it doesnt kill border or height, mostly as i think that's overkill...

How's this sound to everyone?

[tombigel]

About height:
Was it tested with long lists to see if on certain browsers it doesn't trigger a vertical scrollbar?

[paulirish]

Was it tested with long lists to see if on certain browsers it doesn't trigger a vertical scrollbar?

nope.. can you try it out?

[tombigel]

busy week at work, but i'll try to find the time for an experiment.
btw - the site where i had the issue is up: http://zibaba.com

[jonathantneal]

/*
    Visually Hidden: Level 1
    Does not support:
        Box exceeding x/y of window (by width or position) in Chrome
        Padding exceeding x/y of window in Chrome & IE7
        Border exceeding x/y of window in Chrome & IE7
*/
.visuallyHidden {
    clip: rect(0 0 0 0);
    overflow: hidden !important;
    position: absolute !important;
}

/*
    Visually Hidden: Level 2
    Does not support:
        Padding exceeding x/y of window in Chrome & IE7
        Border exceeding x/y of window in Chrome & IE7
*/
.visuallyHidden {
    height: 1px !important;
    margin: -1px !important;
    width: 1px !important;
}

/*
    Visually Hidden: Level 3
    Does not support:
        Padding exceeding x/y of window in Chrome & IE7
        Border exceeding x/y of window in Chrome & IE7
*/
.visuallyHidden {
    padding: 0 !important;
}

/*
    Visually Hidden: Level 4
    Supports all known width, position, css combinations
*/
.visuallyHidden {
    border: 0 !important;
}

[jonathantneal]

/*
    Visually Hidden: Level 4 Combined
*/
.visuallyHidden {
    border: 0 !important;
    clip: rect(0 0 0 0);
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

[nimbupani]

Updated visuallyHidden rule to make sure it overrides all other declarations. Thanks Jonathan Neal. Closed by 07768ed

[nimbupani]

Note: The classname uses an inconsistent camelcase. Needs to be updated to use lowercase.

[nimbupani]

Fixed by 6da1bd8

[alanfluff]

I just found an IE7 horizontal scrollbar problem that is fixed when I replace the .visuallyhidden CSS from H5BP 3.0.1 (this):

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

with the CSS from 'Visually Hidden: Level 4 Combined' #194 (comment) (this):

/*
Visually Hidden: Level 4 Combined
*/
.visuallyHidden {
    border: 0 !important;
    clip: rect(0 0 0 0);
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

As a newbie here I hope it was OK that I just dropped in and added this comment.

[cust0dian-old]

@alanfluff, the only difference between the two is that in latter !important rules are used and if you encounter such problems with stock one, make sure to not define any rules in css/style.css after helper classes.

[alanfluff]

Thanks cust0dian, I'll check the actual CSS.

I did check in the SASS (that I am new to) that this and the other helper classes came last but of course it's how the CSS looks that counts so maybe it's my SASS use. I'll try to check and comment. Cheers.

[alanfluff]

@cust0dian I have two stylesheets the second one was IE specific, the first included the helper classes so I thought that was it and swapped them around.

But the problem is still there for IE7. I'm surprised :/ I really thought that would have been the reason.

In case it helps, this is the particular tag that is causing the problem for IE7:

<img class="visuallyhidden" src="/img/logo.png" alt="My Co Inc. logo" />

The site is on a local dev platform tied into a CMS and so not easy to move online, but if there's any more I can tell you/others to help see if this is a real issue or not, just say the word.

[alanfluff]

Just as an experiment and in case it helped explain I wondered if this might work:

<div class="visuallyhidden"><img src="/img/logo.png" alt="My Co Inc. logo" /></div>

and it does—that is the standard CSS from H5BP 3.0.1 does not cause a horizontal scrollbar in IE7 when the visuallyhidden class is applied to a parent of that image rather than the image itself.

I don't suggest this is the answer, just thought I'd note it in case it helps.

[cust0dian-old]

Do scrollbars appear in this test case? (I don't have IE7 right now.)

[alanfluff]

@cust0dian No, neither in jsFiddle nor in a test page made from it:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Hello World</title>

<meta charset="utf-8" />
<meta name="description" content="Describe me please" />
<meta name="author" content="Made by Alan" />

<style>

.bigimg { width: 2000px; height: 2000px; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }


</style>

<link rel="shortcut icon" type="image/ico" href="XXX.ico" />

<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>

<body class="helloWorld">

<p>IMG element visually hidden:<p>
<img class="visuallyhidden bigimg" src="img.png" alt="">

<p>Container DIV element visually hidden:</p>
<div class="visuallyhidden"><img class="bigimg" src="img.png" alt=""></div>

</body>
</html>

[cust0dian-old]

@alanfluff, then it's something in your CMS styles or somewhere that selects IMG element and overwriting overflow property. Definitely not H5BP causes it.

Just stick with wrapper DIV and you should be fine.

[alanfluff]

@cust0dian THANK you and sorry to have bothered the thread with this, glad it's me.