Wie arbeite ich mit Ipad Safari in diesem Beispiel-Codepen? (es sieht wie ein Albtraum aus)

Question

Ich habe die Übungen in Freecodecamp gemacht und ich mache jetzt mit Sachen in der persönlichen Portfolio-Übung herum, die nur verschiedene Funktionen ausprobieren. Meine Beispiel-Portfolio-Website sieht in den meisten Desktop-Browsern gut aus und ich habe eine Idee, wie man die mobilen Android-/Kindle-Fire-Versionen mit einigen Medienabfragen reparieren kann.

Allerdings habe ich die Codepen-Site auf einem Ipad Safari getestet und die Ergebnisse haben mich dazu gebracht, mein iPad aus dem Fenster zu werfen. Es zeigt nicht einmal HTML-Inhalt und buchstäblich nichts funktioniert - es ist eine absolute Abscheulichkeit.

Kann mir jemand Hinweise geben, was im Safari Browser im Vergleich zu jedem anderen Browser schief läuft? Es ist so versaut, dass ich nicht wirklich sicher bin nur wo ich anfangen soll ...

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

Ein Beispiel Bild (es ist viel zu groß ...):

Die CSS säumige :

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; 
} 

Answer 1

Nur ein Update für alle, die auf das gleiche Problem stoßen. Ich habe eingegrenzt, dass das Problem nur in Safari für iOS auftritt, während es auf Codepen ausgeführt wird. Es scheint so, als ob Codepen Ihre Website in einem I-Frame ausführt, und mobile Safari wird wirklich komisch, wenn Sie VH- und VW-Einheiten in Frames verwenden.

Die Verwendung der Debug-Ansicht behebt dieses Problem, also war dies im Grunde eher ein Codepen-Problem als ein Problem mit dem CSS. Die Debug-Ansicht eliminiert grundsätzlich den Code-Bloat und führt nur den reinen Code aus - der einzige Kick ist, dass nur der Kontoinhaber die Debug-Ansicht verwenden kann.

This page enthält große Informationen, die das Problem erklären, und bietet sogar Code, um das Problem der i-Frames zu beheben. Ich habe nicht bestätigt, dass es aber funktioniert, weil ich keinen Zugang mehr zum fraglichen ipad habe (wurde von einem Freund ausgeliehen).

Ich habe auch bestätigt, dass die meisten mobilen Browser keine festen Hintergründe oder konstante Scroll-Ereignisse unterstützen, so dass diese Probleme erwartet werden.