Improve visuallyhidden class further

[anselmh]

The HTML5Boilerplate team has recently improved the .visuallyhidden class to fix issues with Voice Over. The changes are in https://github.com/h5bp/html5-boilerplate/pull/1989/files.

Maybe you want to incorporate these changes as well on https://allyjs.io/tutorials/hiding-elements.html#2017-edition-of-visuallyhidden as I saw you updated the code snippet with a quite nice selector chain now?

[rodneyrehm]

Thanks for bringing this to my attention! I just read through h5bp/html5-boilerplate#1985 to understand the change and noticed that they reverted the change 3 days ago, as this was causing visual problems.

[anselmh]

Oh, heh, thanks for reporting that back! Well then it’s probably not the best idea to change the code.

[cedeber]

I didn't test it with Voice Over, but on IE 11 if a visually hidden element is a flexbox child it is rendered. I mean, you don't see it but it takes space. I fix it by adding flex: 0 0 0 to the class.

[cedeber]

Ok, I test it again and the flex solution doesn't work. The magic of IE debugger.