Mobile safari nav header vertically misaligned

[chenglou]

See the vertical alignment for the word BuckleScript vs the search

[JoelMarcey]

@chenglou Interesting. I cannot reproduce Chrome Developer Tools, but I see it on my phone. :/

[xyclos]

I'd like to work on this.

[richardzcode]

Just tried with my phone. Looks good now, with icon. Maybe the misalignment was from empty icon

[JoelMarcey]

@chenglou - are you still seeing the issue?

[chenglou]

I can still see it. Not in chrome inspector, but in safari's inspector (Develop -> Responsive Design Mode)

[richardzcode]

Now I see it. It can be reproduced in Chrome as well, but not on phone. Basically screen width need to be pretty small ( < 376px ) to make the icon go away then we can see the misalignment.

The CSS on navigation is kind of complicated. Luckily seems found a good fix.

I was going to make a PR but noticed there are differences between bucklescript.github.io and current example, in HTML and CSS. So no PR needed.

For bucklescript.github.io, just modify main.css file, add css for .wrapper in mediaquery of max 375px

@media (max-width: 375px) {
  .logo {
    display: none;
  }

  .headerTitle {
    font-size: 17px;
  }

  .wrapper {
    padding: 0 10px;
  }
}

The padding was '0 20px', just change it to '0 10px'

[chenglou]

Thanks for diagnosing this! Ideally the custom.css file in ReasonReact and BuckleScript can completely disappear (we do have site-specific css file, but the custom.css are downstream fixes). So I think a PR to fix this in docusaurus is valuable. It also happens to the docusaurus website itself

[richardzcode]

Docusaurus site look fine on my Safari, not as misaligned as in BuckleScript

I see BuckleScript and Docusaurus sites had already diverged on HTML and CSS. I assume new websites wouldn't have the problem.

Also, I just realized I was trying to fix the alignment between BuckleScript and Docs, actually not the issue stated here :p

Maybe you can try to get latest docusaurus layout and see if problem still remains.

[chenglou]

I've tested without custom styles at all and still saw the misalignment. This is what I see on iOS11:

[JoelMarcey]

Since the height is different on Chrome than Safari, I think fixing an absolute value of a CSS property isn't the answer. There is some underlying difference in how Safari is rendering the search box relative to the top vs. Chrome. We need to figure out why that is.

[haraldur12]

I am tackling the issue. I mean I am trying. I think it has not been fixed yet I assume.

Seems like the search bar is overlapping as well. However it doesn't seem to be appearing on chrome.

[danphamus304]

https://github.com/facebook/Docusaurus/labels/Starter%20Task

[JoelMarcey]

I assume this issue still exists, but would love if someone can confirm it.

[chenglou]

Still is for docusaurus.io

[JoelMarcey]

cc @html5cat

[yangshun]

Some preliminary findings - li.navSearchWrapper has a computed height of 30px on iOS devices but 22px on Android devices. Probably due to some inconsistency in flexbox.

[endiliey]

Is this still happening ? Don't have an iOS devices :cry:

[html5cat]

Yes. There's also a 1 px gap between the nav bars now: https://photos.app.goo.gl/ouZdT6FvVAvUKjTY6

[ahmadalfy]

This issue still persist in the current website. I can fix it

[endiliey]

@ahmadalfy still working on it ? 😉

Edit: If anyone wanted to send a PR. Feel free to do so ! :)