Fixed Positioned Header Persists On Desktop But Not On Mobile?

If you narrow the browser you will see a .header-mobile element. It is fixed positioned. And it persists on desktop but on mobile it's just left on the top. This is the mobile CSS:

Solution 1:

I'm not sure why, but I had to add this:

<metacontent='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'name='viewport'>

Solution 2:

There's two viewports on the web, the layout and visual viewports. The visual is what you currently see, the layout viewport is where position: fixed elements stick to. See https://www.quirksmode.org/mobile/viewports.html for more details.

When you zoom in, position: fixed elements don't stick to the visual viewport so that they don't crowd the limited screen space. See http://bokand.github.io/viewport/index.html for a visual example of how this works.

What's happening in your example: You have width=device-width in your viewport meta tag; however, you have some content on your page that's wider than the device-width. In Chrome, this means that you can zoom out to see the extra content. Additionally, the layout viewport is sized equal to the visual viewport at the minimum zoom level. These two facts combined mean that by having horizontal overflow on your page, the layout viewport is made larger.

Normally, the page would load zoomed out fully so you could see the whole page. Since your viewport meta tag has initial-scale=1, it's actually zoomed in. So when you scroll, you're moving the visual viewport and the fixed elements appear "unfixed". If you were to zoom out fully, you'd see that fixed things stay fixed as you scroll.

This is why adding user-scalalble=no fixes the issue for you: the minimum scale is set to 1 so the layout viewport will match the visual viewport size. In general though, mobile pages should avoid horizontal overflow, a better fix here would be to make sure your content fits within the device-width to prevent overflow and growing the layout viewport.