Browser compatibility for Safari iOS Mobile - Codepen creation

Question

I'm creating a portfolio page in Codepen. I've decided to go with a Fixed background, scrolling site. The pen, so far, works perfectly with all major browsers, except Safari iOS mobile (on my iPhone 6s).

The issue is in the background images within the divs not :cover-ing. It works fine in Safari on desktop.

<nav id="headNav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">FreeCodeCamp</a>
    <a href="#">Contact</a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/hZaQYF/free_code_camp_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/kdp8na/github_shadow_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/jO9V0v/Twitter_shadow_square.png" height="40" 
width="40"></a>
    <a href="#"><img class="roundMe shrinkMe" 
src="https://image.ibb.co/iwtOLv/facebook_shadow_square.png" height="40" 
width="40"></a>
  </nav>

  <div id="homeSection" class="sectionBlock homeSection">

  </div>
  <div id="aboutSection" class="dividerSectionBlock">

  </div>
  <div id="portfolioSection" class="sectionBlock portfolioSection">

  </div>
  <div id="freeCodeCampSection" class="dividerSectionBlock">

  </div>
  <div id="contactSection" class="sectionBlock contactSection">

  </div>

CSS:

 * {
  margin: 0;
}

html, body {
  font-size:10px;
  height: 100%;
}

h1, h2, h3, h4, h5, h6, p {
  margin-bottom: 20px;
}

.roundMe {
  border-width: 0px;
  border-radius: 10%;
}

p, li, a {
  font-size: 1rem;
}

nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}

nav a {
  text-decoration: none;
  color: white;
  line-height: 50px;
}

.sectionBlock {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.dividerSectionBlock{
  height: 50%;
}

.homeSection{
  background-image: url("https://image.ibb.co/nR7rOF/forestpath.jpg");
}

.portfolioSection {
  background-image: url("https://image.ibb.co/iZsfHa/highway.jpg");
}

.contactSection {
  background-image: url("https://image.ibb.co/c9vviF/Meadow.jpg ");
}

#headNav a:nth-child(-n+5){
  float:left;
  margin-left: 30px;
}
#headNav a:nth-child(n+6){
  float:right;
  margin-right: 5px;
}

/* Media Queries */

/*  Screens 0-399*/
@media screen and (max-width: 399px){
  html {
    font-size:6px
  }
  .shrinkMe {
    height: 12px;
    width: 12px;
  }
  nav {
    height: 15px;
  }
  nav a {
    line-height: 15px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 5px;
  }
    #headNav a:nth-child(n+6) {
    margin-right: 2px;
  }
}

/* Screens 400-599 */
@media screen and (min-width: 400px){
  html {
    font-size:8px
  }
  .shrinkMe {
    height: 20px;
    width: 20px;
  }
  nav {
    height: 28px;
  }
  nav a {
    line-height: 28px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 7px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 4px;
  }
}

/* Screens 600-799 */
@media screen and (min-width: 600px){
  html {
    font-size:12px
  }
  .shrinkMe {
    height: 30px;
    width: 30px;
  }
  nav {
    height: 36px;
  }
  nav a {
    line-height: 36px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 14px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 8px;
  }
}

/* Screens 800-999 */
@media screen and (min-width: 800px){
  html {
    font-size:16px
  }
  .shrinkMe {
    height: 40px;
    width: 40px;
  }
  nav {
    height: 44px;
  }
  nav a {
    line-height: 44px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 21px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 12px;
  }
}

/* Screens 999-1199 */
@media screen and (min-width: 1000px){
  html {
    font-size:20px
  }
  .shrinkMe {
    height: 40px;
    width: 40px;
  }
  nav {
    height: 52px;
  }
  nav a {
    line-height: 52px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 28px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 16px;
  }
}

/* Screens 1200 and up*/
@media screen and (min-width: 1200px){
  html {
    font-size:24px
  }
  .shrinkMe {
    height: 50px;
    width: 50px;
  }
  nav {
    height: 60px;
  }
  nav a {
    line-height: 60px;
  }
  #headNav a:nth-child(-n+5) {
    margin-left: 35px;
  }
  #headNav a:nth-child(n+6) {
    margin-right: 20px;
  }
}

Answer 1

This is because of your fixed position background.

Here is another stackoverflow question which is similar that has a solution that worked: background-size: cover not working on iOS