Default mobile theme has a 1px gap on some mobile devices

[markerikson]

🐛 Bug Report

Some site users have reported a 1px gap between the header sections on mobile devices, especially iPhones with iOS 12 and Safari / Chrome.

This gap appears on multiple sites, including https://react-redux.js.org, https://docusaurus.io/en/ , and https://facebook.github.io/create-react-app/docs , so it appears to be something about the default Docusaurus mobile theme.

Note: I have not observed this myself - I'm filing this for other users who have.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Browse to a Docusaurus mobile site on an iOS 12 device. Scroll down.

Expected behavior

There's no gap in the header.

Actual Behavior

There is a 1px horizontal gap in the header, and the main page is visible scrolling past that.

Sample screenshots:

Reproducible Demo

Browse straight to the Docusaurus site on an iOS 12 device, apparently.

[sveinpg]

I think this can be fixed by disabling scaling on the website.
For instance by adding this meta-tag: <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">

If disabling scaling is not desirable, a background colour might do the trick.

[endiliey]

Duplicate of #820 but will leave this issue open since it might get more attention

[BTMPL]

Setting the scaling does not fix the issue, changing the .fixedHeaderContainer from min-height: 50px to min-height: 51px does (the extra px either fills the gap, or is overlayed by the navigation item).

Not sure if that's an acceptable fix?

You can reproduce this in Chrome simulator by opening the page in an iPhone 6/7/8 emulation and changing the scale factor to 125%

edit: nvm, I see there's already a fix in the queue - https://github.com/facebook/Docusaurus/pull/1157/files