search

johnfernow / personal-website

My personal website
https://johnfernow.com
0 stars 0 forks source link

layout broken on iOS #23

Closed johnfernow closed 5 years ago

johnfernow commented 5 years ago

Not sure why, works perfectly fine in Chrome and Firefox's phone layout simulator, and it works perfectly fine on Android (Galaxy S3, Android 7.1.2 LineageOS, using Google Chrome).

I should probably see if it works on Safari on Mac the next time I have the opportunity to use one. If it doesn't work for Safari in general, it hopefully should be easy to fix by looking at the console. If not, hopefully they'll let me connect my phone and debug it. I have the required Bootstrap meta tags, so I really have no clue what could be the cause of this since it works well in everything else. IMG_7540 IMG_7541

johnfernow commented 5 years ago

Discovered in the following block in css/footer.css ...

html, body {
  height: 100%;
  margin: 0;
}

the line height: 100%; is what is causing the issue on iOS. Not quite sure why. However, at least I know the cause.

I might be able to workaround it by using a CSS selector to only do that CSS if the device isn't on iOS, but it might not work in the future due to it being quite an oddity (works because only Safari Mobile implements -webkit-overflow-scrolling — if that changes, then the fix won't work.)

I may just have to implement my footer in a different manner. Really irritating and un-ideal to change from a succinct and clean solution to something larger because one browser doesn't work like every other, but there are too many iOS devices to just leave it broken. I based my footer off of this guide, but can try this one instead if I can't get it to work with my current layout.

To test website on phone without pushing to master, run jekyll serve --host=0.0.0.0 and then connect to the host's IP address (IPv4 worked for me, must still include the port number after the IP when entering the URL in a mobile browser).

johnfernow commented 5 years ago

Turns out changing height: 100% to min-height: 100vh; fixes the problem. Who knows why. Perhaps an error in the Webkit engine, since it seems other browsers had similar problems in the past, and maybe iOS Safari is running a slightly older version? Whatever the cause, this fixes it, will create branch and commit it soon.