Fixed header not fixed when there is horizontal overflow

Question

I have a header with a fixed position and a width of 100%. It's working as expected on desktop, but not in mobile browsers (Chrome, Opera and Edge). I'm testing on Android 5.1 if that makes a difference.

When there is horizontal overflow, the header is no longer fixed.

Answer 1

I fixed it by setting overflow: auto on both html and body.

EDIT: doing that makes the header go over the scrollbar. The actual fix is adding user-scalable=no to <meta content='width=device-width,initial-scale=1' name='viewport'>

See this answer