pages.nist.gov - layout is messed up

[webcompat-bot]

URL: https://pages.nist.gov/800-63-3/sp800-63-3.html
Browser / Version: Firefox Mobile 50.0
Operating System: Android 6.0.1
Problem type: Layout is messed up

Steps to Reproduce

1. Navigate to: https://pages.nist.gov/800-63-3/sp800-63-3.html
2. …

Expected Behavior:

Actual Behavior:
Layout borked

From webcompat.com with ❤️

[wisniewskit]

It seems they don't have a good mobile experience across the board; Chrome just zooms way out, while Firefox zooms in. That itself wouldn't make this a web compatibility issue, but for some reason their sidebar "sticks" in Firefox (but not Chrome mobile), making it painful to see their content by panning around. On that basis, I'm marking this as needsdiagnosis.

Edit: Firefox gets a position:fixed sidebar; so does Chrome desktop. I think some remote debugging may be needed to see why Chrome doesn't get a position:fixed sidebar.

[Sailesh27]

It is working correctly in Firefox Beta.

[wisniewskit]

If Firefox Beta is "correct", then all current versions are, because they're rendering the same way. There are really two problems here; the page doesn't provide a good mobile experience, and there is a probable compat issue with which zoom level Chrome and Firefox choose by default for the given meta viewport tag:

<meta name="viewport" content="width=device-width">

@karlcow, is this another case for your pile of meta-viewport quirks?

[karlcow]

So the different ways of managing the page for Firefox and Chrome is a known issue.
Basically Chrome is trying to take the larger element in the page and to make it fit in.

In this case this is happening because of an image a bit down in the page

<div class="text-center">
  <p><img src="sp800-63-3/media/AAL_CYOA.png" alt="AAL Choose Your Own" style="width:1000px;height:1195px;;min-width: 1000px;min-height: 1195px;"></p>

  <p><strong>Figure 5-1 - Selecting AAL</strong></p>
</div>

As you can see the CSS for this image is defined in the HTML as:

element {
	width: 1000px;
	height: 1195px;
	min-width: 1000px;
	min-height: 1195px;
}

in fact if they would remove these style elements on a couple of images and just define:

img {max-width: 100%;}

That would work a lot better in all browsers.
There is still a table which is around 622px wide, but that would be a better story for the user on all browsers.

This site has a fluid design but not so much really responsive.

[karlcow]

I would close it as worksforme
The meta viewport and level of zoom is indeed on my pile.
whatwg/compat#62