How do I work with Ipad Safari on this example codepen? (it looks like a nightmare)

I've been doing the exercises in Freecodecamp and I'm now messing around with stuff in the personal portfolio exercise, just trying out different features. My sample portfolio website looks okay in most desktop browsers, and I have an idea on how to fix the mobile android/kindle fire versions with some media queries.

However, I tested the codepen site on an Ipad Safari and the results made me want to throw my ipad out the window. It doesn't even show any html content and literally nothing works - it's an absolute abomination.

Can anyone give me some hints as to just what is going wrong in the Safari mobile browser compared to every other browser? It's so messed up that I'm not really sure just where to start...

Codepen: https://codepen.io/hsinwang5/pen/yOpZag

An example image (It's way too big...):

The offending css:

  html, body {
  height: 100%;
}

nav {
  position: fixed;
  background-color: black;
  width: 50vw;
  margin-left: 23.7vw;
  height: 4em;
  top: 0em;
  transition: top .2s ease-in-out;
  border-radius: 25px;
}

.scroll-up {
  top: -40em;
  transition: top 1.5s ease-in-out;
}

.nav {
  margin-top: 5px;
  text-align: center;
  padding-right: .4em;
  font-family: covered by your grace, sans serif;
}

nav a {
  margin-left: 1em;
  font-size: 2em;
  color: green;
}

#hero {
  margin-top: -20px;
  /*image taken from topwallpapers.pw*/
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/dark_animals_grayscale_lions_black_background_lion_profile_desktop_1900x1200_hd-wallpaper-733464_zpsuczcstcl.jpg");
  height: 100vh;
  background-size: cover;
}

h1 {
  padding-top: 25vh;
}

h1, h4 {
  color: gray;
  font-family: chewy, sans serif;
}

.main-content {
  /*image taken from topwallpapers.pw*/
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/CroppedLion_zpsbk5znhxr.jpg");
  margin-top: -20px;
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  font-family: chewy, sans serif;
  color: yellow;
}

.static {
  background-attachment: fixed;
}

.main-content p {
  margin-top: 20px;
}

.main-content h2 {
  font-size: 3.7em;
  padding-top: 1%;
}

#portfolio {
  margin-top: 30vh;
}

.project {
  margin-bottom: 80vh;
  margin-left: 5vw;
  width: 350px;
  color: green;
}

.project h3 {
  text-align: center;
}

#end-portfolio {
  margin-bottom: 0;
  padding-bottom: 65vh;
}

footer {
  background-image: url("http://i1053.photobucket.com/albums/s462/HsinWang5/lion_lion_cub_family_cub_caring_baby_sunshine_40132_1920x1080_zpsae93h3zy.jpg");
  background-size: 100vw 100vh;
  margin-top: -20px;
  height: 100vh;
}

footer h3 {
  color: black;
  font-size: 3em;
  padding-top: 5vh;
}

Answers


Just an update for anyone who's running into the same problem. I've narrowed down that the problem only seems to happen in Safari for iOS while running on codepen. Seems like codepen runs your website in an i-frame, and mobile Safari gets really weird when using VH and VW units in frames.

Using debug view fixes this problem, so this was basically more of a codepen problem rather than a problem with the CSS. Debug view basically cuts out the codepen bloat and just runs the pure code - the only kicker is that only the account owner can use debug view.

This page contains great info explaining the problem, and even provides code to fix the issue of i-frames. I haven't confirmed that it works however, because I no longer have access to the ipad in question (was borrowed from a friend).

I've also confirmed that most mobile browsers don't support fixed backgrounds or constant scroll-events, so those issues are expected.


Need Your Help

Java boolean[] to byte[] and back

java arrays boolean byte bytearray

I am sending byte[] arrays over a socket connection in Java.

Web service needs to be called every 5 minutes. which is the efficient way to do this?

wcf iis

I have WCF service which is hosted in the IIS 7 or IIS 8 server. The mentioned service should be called every 5 minutes. Which is the efficent way to do this. i have considered jquery/ajax call. what