Fullscreen-Hero-Bild verhält sich seltsam beim Scrollen auf Handy

Meine Fullscreen-Helden-Header funktioniert nicht gut auf mobilen Geräten. Beim Scrollen ändert sich die Höhe, aber ich habe keine Ahnung warum. Hier ist der Code:Fullscreen-Hero-Bild verhält sich seltsam beim Scrollen auf Handy

<header id="header"> 
    <div class="hero"> 
     <h1>Asaxs</h1> 
     <p>gotta be kidding me</p> 
     <a href="#menu" class="btn btn-primary">Check</a> 
    </div> 
    </header> 

header{ 
    background-image:url(https://c4.staticflickr.com/4/3798/9692831755_27d2032a69_k.jpg); 
    background-size:cover; 
    position:relative; 
    height:100vh; 
    max-height: 100vh; 
    overflow: hidden; 
} 

.hero{ 
    padding-right: 60px; 
    position:absolute; 
    top:60%; 
    text-align:right; 
    width:100%; 
    color:#fff; 
    font-size:36px; 
    -ms-transform: translate(0,-50%); /* IE 9 */ 
    -webkit-transform: translate(0,-50%); /* Safari */ 
    transform: translate(0,-50%); 
}

Quelle

2016-08-02 Hadzik

Dies muss genügen Ich denke:

Der Standardmarge durch den User-Agent Sheet ist das Problem. Stellen Sie margin: 0; auf Körper ein.

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    background-image: url(https://c4.staticflickr.com/4/3798/9692831755_27d2032a69_k.jpg); 
 
    background-size: cover; 
 
    position: relative; 
 
    height: 100vh; 
 
    max-height: 100vh; 
 
    overflow: hidden; 
 
} 
 
.hero { 
 
    padding-right: 60px; 
 
    position: absolute; 
 
    top: 60%; 
 
    text-align: right; 
 
    width: 100%; 
 
    color: #fff; 
 
    font-size: 36px; 
 
    -ms-transform: translate(0, -50%); 
 
    /* IE 9 */ 
 
    -webkit-transform: translate(0, -50%); 
 
    /* Safari */ 
 
    transform: translate(0, -50%); 
 
}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <header id="header"> 
 
    <div class="hero"> 
 
     <h1>Asaxs</h1> 
 
     <p>gotta be kidding me</p> 
 
     <a href="#menu" class="btn btn-primary">Check</a> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

Quelle

2016-08-02 15:42:42 kukkuz

Leider funktioniert es nicht. Ich verwende normalize.css, aber das Problem ist, dass, wenn ich für ungefähr 80vh nach unten scrolle, die Höhe des Elements wächst und zufällig abnimmt. Ich benutze Bootstrap und fixed top navbar, vielleicht ist hier das Problem? – Hadzik

ohh ich sehe, es ist besser, Sie können eine jsFiddle hinzufügen, so dass wir Ihnen helfen können ... – kukkuz

https://jsfiddle.net/ydpuhg0p/1/ – Hadzik

Fullscreen-Hero-Bild verhält sich seltsam beim Scrollen auf Handy

Antwort

Verwandte Themen