Safariのフッターはコンテンツをスクロールしますが、Chromeでは表示されません

Question

Safariを使用すると、フッターがコンテンツとともにスクロールします。しかし、クロムに切り替えると、スクロールせずページ中央に座ります。ここでは、関連するコードは次のとおりです。

<footer> 
    <div class="mastfoot"> 
     <div class="foot_class"> 
      <a href="--"><p>Facebook</p></a> 
      <a href="--"><p>Email</p></a> 
      <a href="--"><p>Linkedin</p></a> 
      <a href="--"><p>Github</p></a> 
      <a href="--"><p></p></a> 
      </div> 

    </div> 
</footer> 

---

html, 
body { 
    -webkit-perspective: 1000px; 
    background: #457fca; /* fallback for old browsers */ 
    background: -webkit-linear-gradient(to right, #5691c8, #457fca); /* 
    Chrome 10-25, Safari 5.1-6 */ 
    background-image: url('bg.jpg'); 
    background-size: cover; 
    padding: 0; 
    height: 100%; 

    color: #fff; 
    text-align: center; 
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5); 
} 
.mastfoot { 
color: #999; /* IE8 proofing */ 
color: rgba(255, 255, 255, .5); 
} 

footer { 
position: fixed; 
margin-top: -150px; /* negative value of footer height */ 
height: 150px; 
clear: both; 
} 

    .foot_class { 
    margin-top: 125px; 
} 
.foot_class a { 
    color: #fff; 
    border: 1px solid white; 
    background: #2F3336; 
    border-radius: 4px; 
    text-align: center; 
    text-decoration: none; 
    font-family: fontawesome; 
    position: relative; 
    display: inline-block; 
    width: 40px; 
    height: 40px; 
    padding-top: 12px; 
    margin: 0 2px; 
    transition: all .5s; 
} 
.foot_class a:hover { 
    background: #00b9b7; 
} 
.foot_class a:hover p { 
    border-radius: 30px; 
    bottom: 35px; 
    visibility: visible; 
} 
.foot_class a p { 
    color: #666; 
    position: absolute; 
    bottom: 0; 
    left: -25px; 
    right: -25px; 
    padding: 5px 7px; 
    z-index: -1; 
    font-size: 14px; 
    border-radius: 2px; 
    background: #fff; 
    visibility: hidden; 
    transition: all 0.5s cubic-bezier(0.6, -0.6, 0.2, 1.5); 
} 
.foot_class a p:before { 
    content: ''; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    border-top: 5px solid #fff; 
    position: absolute; 
    bottom: -5px; 
    left: 40px; 
} 

私は本当にこれが起こっている理由はわかりません。私はWeb開発者にはかなり新しいので、私は愚かな間違いをしていると確信しています。それが助けになるなら、ここにウェブサイトのURLがあります：www.chrisrisley.us。それは自分のために構築している個人的なウェブサイトです。

Answer 1

コードの詳細はもう見れますか？フッターの位置で試してみてください。あなたはこれを試して、それが役立つかどうかを見ることができます。

footer { 
position: absolute; 
right: 0; 
bottom: 0; 
left: 0; 
margin-top: -150px; /* negative value of footer height */ 
height: 150px; 
clear: both; 
} 

または

.mastfoot { 
position: absolute; 
right: 0; 
bottom: 0; 
left: 0; 
color: #999; /* IE8 proofing */ 
color: rgba(255, 255, 255, .5); 
}