I have an older Firefox that I'm running and the Web Design Standards page is all borked up. I'm wondering how many people that don't keep the upgrade stream going for their browsers will now have problems.
But there are some other things that are more fundamentally borked, the accordions won't operate. I'm for progressive enhancement and while requiring JavaScript for a site to work well or in some cases work at all is okay, there should still be some provision to "fail safe" so the content is available when the specific JavaScript fails for some reason (I don't think it's because they're using <button>, technically using that outside a form was against old HTML specs but I think browsers still routinely supported them). For accordions, my preference would be to use <details> and <summary> elements and a polyfill to make them work in browsers that don't support them; they'll "fail safe" and display all the content in browsers that don't support them and don't run the polyfill.
Maybe older Firefox has a bug in calc(), disabling that property in a newer browser is enough to shift the content below the sidenav because it falls back to width: 100%;. I see what you mean about hard to read, if I disable the calc() width, the sidenav stays put but the main content scrolls on top of it. That's a little confusing because the sidenav staying put is due to the property position: sticky; but caniuse.com says Firefox didn't support that until version 26, version 32 without having to enable a flag.
Anyhow, I do think government guidelines in particular should handle older browsers better than this page is demonstrating. Part of the point of using frameworks for libraries and others is they can maintain and aggregate all the little solutions to problems between browser implementations and between older and newer browsers.
I'd update!
1. https://www.cvedetails.com/vulnerability-list/vendor_id-452/...