.visually-hidden creating overflow /horizontal scrollbars on html element?
I have been debugging this for days and couldnt figure out wtf was going on; finally narrowed it down to the
position: absolute on my .visually-hidden class?
Why on earth is this happening? i use this class all the time! and the same copy and paste class so its not like i just wrote it and ordered it differently or something , (did move position absolute to the top for easy discord access but usually its between overflow: hidden and whitespace: nowrap)
https://codepen.io/Miss-Fox/pen/VwoKNOM?editors=0100
EDIT: Also if i hardcode the products, it takes more than three of these before i start getting overflow ~ 800px screen width; curiouser and curiouser
20 Replies
bump? Im running into this issue in another project where im using visually-hidden to hide labels visually but keep them there for screen readers and its creating a ton of excess space . it only seems to cause overflow when theres quite a few of them, and in my current project i have 30 items so thirty labels. for now im using position fixed instead of absolute but i worry if a transform gets applied...
thats not enough to visually hide something
you are setting it to have a clip-path: inset(50%), and im not sure that that is a good replacement
also, you didnt set a location for your position absolute
and if you have a position: relative parent, i can see this screwing up stuff too
i would also force the width and height and font-size to 0
I just pulled the recommendation from the a11y project and added to my reset long ago. I've never noticed issues until recently but I've had 2 projects in a row that use dynamic content and have a ton of elements with the class snd it's creating issues.
So you recommend to set width, height and font size to 0; should I remove the clip-path or set it to
inset(100%) ?
I also had it nested within a Dialog element and they took up all this space at the end like 30 <p class="visually-hidden"> but not where they would be if they were visible.How-to: Hide content - The A11Y Project
How-to hide content but still make it accessible to screen readers.
keep it to inset(100%)
and setting those 3 properties to 0 is just an insurance, to absolutely force the element size to nothing
I assumed there was some kind of reason they kept the width and height to 1px in this pattern like making sure it stays in the accessibility tree. And that the combo of clip: rect(0 0 0 0) with clip path 50% should make it small enough .
Changing width and height is enough to get rid of the scroll bars apparently , weirdly it only took 4 text items with the class to cause horizontal scrollbars, so you’d think that’s 4 extra pixels or 2 with the clip-path(50%) but my scrollbars were accounting for content that was much larger than a few pixels.
I’m not familiar with navigating the accessibility tree, how can I make sure the width and height of 0 doesn’t remove them from the accessibility tree? Where do I find it or do I need a screen reader ?
you can quickly check in firefox, since it has a simple tree view
but the best is to use a screenreader and test it
and yes, 4px do make a huge difference
But it’s giving me a scrollbar that’s doubling the page size?
probably because of the clip: inset(50%)
i can only guess without testing it
Be my guest , this pen the items are hard coded into the html if that makes anything easier
https://codepen.io/Miss-Fox/pen/abepJvX
im also confused why they are all going to the right of the page and not sitting where they would be had they not taken out of the flow .
Btw I did find the overflow is on the html not the body if that makes any difference
🤔 wait, what's the issue?
im confused now
I have overflow on my html element that is creating horizontal scrollbars. I’ve narrowed down that the overflow is coming from having 3 or 4 text elements with the visually hidden class and toggling the property of position absolute is what will add or remove the scrollbars.
Just linked both scrims: in one, the products (and visually hidden items) are dynamically added and the other, the products (and the visually hidden items) are hardcoded.
Just linked the latter in case you wanted to play with it - which I found was much more difficult to do when dynamically adding the items. I couldn’t comment in and out products or the visually hidden items to see how many it took to cause overflow without the hardcoded html.
good news is i do see the .visually-hidden items in the accessibility tree at least on chrome, even with w x h set to 0 !
i don't see anything wrong with the last link you've sent
there's just the horizontal overflow, but you commented out all overflows, which makes me think that that is intentional
sorry i may have been fussing with it when you looked. i uncommented the
to see if i could still see the visually-hidden items in the accessibility tree with the class having w x h at 0 (which i could). the issue with the html overflow/scrollbars comes when i change width and height back to 1px .
but since w/h work at 0 (at least in chrome, still have to test other browsers; i have to imagine theres some reason the pattern leaves it at 1px and doesnt set to 0px), ill use that as baseline for the class for now.
and yes the horizontal scrollbars on the product scroller itself is intentional, the html horizontal scrollbar is not.
im sorry. i read and re-read and re-re-re-read, but im still confused
can you pretend that im super ultra stupid and mark a screenshot with what's wrong?
I’m sorry I’m in a sleep deficit and shouldn’t be trying to communicate via text. It’s okay don’t worry about it; you already suggested the solution that seems to work. the width:0, height:0 seems like it will solve the html overflow issue and still keep the items in the accessibility tree.
The problem was horizontal overflow on the html element when there was more than 4 text items with the visually-hidden class in the flow (when the visually-hidden class styles are set to the standard pattern from a11y).
The w x h : 0px seems to solve it and still leave the items in the accessibility tree , at least in chrome; haven’t found the tree in safari and haven’t tested Firefox yet.
So you had mentioned that you would have to play with it and I linked the Hardcoded pen so it would be easier to mess with but no need to spend any more time trying to parse through.
that makes sense now
i always make sure that hidden stuff has 0 width and height
there's no reason for it to do not show in the accessibility tree, as it isn't set to
display: none
but testing is better than notI just assume there's a reason the pattern used 1px for width and height instead of 0px , and accessibility tree was tge only thing I could think of; but so far so good . curious why they didn't use 0 to begin with ! Appreciate all your help with this!!
i think the 1px is really in fear of that: that the browser skips rendering the element and it doesn't exist for the accessibility tree
thats my assumption as well but maybe browsers have changed things since the original pattern was created
it's possible, i can't say for sure