search

christoph-fricke / shpioneers.de

Website done together with @bendixsonnenberg
http://shpioneers.de
0 stars 0 forks source link

Fixed vh bug on mobile #84

Closed christoph-fricke closed 7 years ago

christoph-fricke commented 7 years ago

This fixes the bug that the header does not have a 60px margin to the screen bottom. However it creates a new bug.

The original bug appears when you load the page on mobile in most browsers (Android & IOS). The navigation bar of the browser is not excluded from the vh units (in most browsers... Facebook browser does that...). So everything get pushed down by its height which caused the problem that there was no 60px margin to the screen bottom and the FAB was not completely visible. This inline js fixes the problem.

It sets the element height(should be 100vh - 60px) to the window height - 60px. The new value does not contain the vh unit and fixes the bug...

The new bug can get created like this: Scroll down now, so the navigation disappears, and the click on the home button so the website scrolls up again without letting the navigation bar appear again. That is where everything looked nice before the fix(60px margin etc.). Now the height of the header has the navigation bar height excluded so without the navigation bar you can already see the news h1 in this situation.

We have to decide wether or not we want it to look nice when the page loads or when the user scrolls down and clicks on the home button.

christoph-fricke commented 7 years ago

Link to the solution: http://stackoverflow.com/questions/39384154/calculating-viewport-height-on-chrome-android-with-css

bendixsonnenberg commented 7 years ago

i would keep it the old way because

  1. this new version looks a little bit more broken than the old one
  2. it wasn't such a big problem to begin with
christoph-fricke commented 7 years ago

@quannten24 I don't think that it looks more "broken". It just looks like it should have looked and how it looks on desktop atm.

bendixsonnenberg commented 7 years ago

but the h1 from news looks quite out of place

christoph-fricke commented 7 years ago

I don't get what you mean but I just saw that it is looking strange on desktop know as soon as the browser is not really full screen... Let's dismiss this fix.