Compatibilité de navigateur pour Safari iOS Mobile - Création Codepen

Question

Je crée a portfolio page in Codepen. J'ai décidé d'aller avec un fond fixe, un site de défilement. Le stylo, jusqu'à présent, fonctionne parfaitement avec tous les principaux navigateurs, sauf Safari iOS mobile (sur mon iPhone 6s).

Le problème est dans les images d'arrière-plan dans les divs pas :cover -ing. Cela fonctionne bien dans Safari sur le bureau.

<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

Ceci est dû à l'arrière-plan de position fixe.

Voici une autre question de stackoverflow qui est similaire et qui a une solution qui a fonctionné: background-size: cover not working on iOS