1
フルスクリーンのヒーローヘッダーがモバイルデバイスでうまく機能しません。それはスクロール中に高さを変えますが、私は理由を知りません。ここでは、コードは次のようになります。フルスクリーンヒーロー画像がモバイルでスクロールしている間に奇妙に動作する
ユーザーエージェントスタイルシートによって、デフォルトのマージンは問題です:
<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%);
}
残念ながら、それは動作しません。私はnormalize.cssを使用していますが、問題は、私が約80vhのためにスクロールダウンすると、要素の高さがランダムに減少して減少することです。私はブートストラップと固定トップナビゲーションバーを使用しています、多分ここに問題がありますか? – Hadzik
オハイオ州私は、あなたが助けることができるように、より良いあなたがjsFiddleを追加することができます参照してください... – kukkuz
https://jsfiddle.net/ydpuhg0p/1/ – Hadzik