Fußzeile Problem in Safari

Question

Ich habe ein Fußzeilenproblem nur in Safari, in anderen Browsern ist alles in Ordnung. Zwischen dem grauen Fußteil und der Browserkante unten ist ein seltsames Loch. Hier

ist die Website: http://eisenpar.com/chessable/

Hier ist der Footer Code:

HTML:

<footer> 
    <div class="top-footer"> 
    <div class="wrapper"> 
     <a class="top" href="#main-slider" title="Back to top">Back to top</a> 
     <ul class="footer-menu"> 
     <li><a href="https://www.chessable.com/about-us/" title="About Us">About Us</a></li> 
     <li><a href="https://www.chessable.com/contact-us/" title="Contact Us">Contact Us</a></li> 
     <li><a href="https://www.chessable.com/faq/" title="FAQs">FAQs</a></li> 
     <li><a href="https://www.chessable.com/terms/" title="Terms of Use">Terms of Use</a></li> 
     <li><a href="https://www.chessable.com/faq/#beta" title="Open Beta">Open Beta</a></li> 
     </ul> 
    </div> 
    </div> 
    <div class="bottom-footer"> 
    <div class="wrapper clear"> 
     <ul class="footer-menu"> 
     <li><a href="https://www.chessable.com/science/" title="Science">Science</a></li> 
     <li><a href="https://www.chessable.com/leaderboard/" title="Leaderboards">Leaderboards</a></li> 
     <li><a href="https://www.chessable.com/press/" title="Press">Press</a></li> 
     <li><a href="https://www.chessable.com/privacy/" title="Privacy &amp; Cookies">Privacy &amp; Cookies</a></li> 
     </ul> 
     <div class="social-icons"> 
     <a class="fb" href="#" title="Join Us on Facebook"><i class="fa fa-facebook"></i></a> 
     <a class="tw" href="#" title="Join Us on Twitter"><i class="fa fa-twitter"></i></a> 
     </div> 
    </div> 
    </div> 
</footer> 

CSS:

.new-frontpage footer { 
    margin: 0px; 
    padding: 0px; 
    min-height: auto; 
    background-color: transparent; 
    background-image: none; 
    z-index: 0; 
    position: relative; 
    border-top: none; 
} 

.new-frontpage .top-footer { 
    background: url('../img/top-footer-bg.png') 0 0 repeat #385a89; 
    padding: 22px 0px; 
    position: relative; 
} 

.new-frontpage .top-footer .wrapper { 
    position: relative; 
} 

.new-frontpage .top-footer a.top { 
    width: 60px; 
    height: 60px; 
    display: block; 
    position: absolute; 
    text-indent: -9999px; 
    background: #3C3C3C; 
    top: 94px; 
    right: -100px; 
    border-radius: 5px; 
} 

.new-frontpage .top-footer a.top:after { 
    content: ""; 
    width: 30px; 
    height: 30px; 
    position: absolute; 
    display: block; 
    background: url('../img/sprites.png') -250px -72px no-repeat; 
    top: 15px; 
     left: 15px; 
} 

.new-frontpage footer .footer-menu { 
    list-style-type: none; 
    text-align: center; 
    position: relative; 
    z-index: 10; 
} 

.new-frontpage footer .footer-menu li { 
    display: inline-block; 
    margin-right: 30px; 

} 

.new-frontpage footer .footer-menu li:after { 
    content: ""; 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background: #fff; 
    border-radius: 100px; 
    margin-left: 30px; 
} 

.new-frontpage footer .footer-menu li:last-child { 
    margin-right: 0px; 
} 

.new-frontpage footer .footer-menu li:last-child:after { 
    display: none; 
} 

.new-frontpage footer .footer-menu li a { 
    color: #fff; 
    font-size: 18px; 
    font-weight: 400; 
} 

.new-frontpage footer .footer-menu li a:hover { 
    color: #b6c7e0; 
} 

.new-frontpage footer:after { 
    display: none !important; 
} 

.new-frontpage .bottom-footer { 
    background: #353535; 
    padding: 20px 0px; 
} 

.new-frontpage .bottom-footer .logo-block { 
    width: 216px; 
} 

.new-frontpage .bottom-footer .logo-block a { 
    font-size: 34px; 
    font-weight: 700; 
    color: white; 
    text-transform: lowercase; 
    margin-top: -6px; 
    display: inline-block; 
} 

.new-frontpage .bottom-footer .logo-block a img { 
    display: inline-block; 
    top: 6px; 
    position: relative; 
    margin-right: 11px; 
} 

.new-frontpage .bottom-footer .footer-menu li:after { 
    display: none; 
} 

.new-frontpage footer .social-icons { 
    margin-top: 22px; 
    text-align: center; 
} 

.new-frontpage footer .social-icons a { 
    display: inline-block; 
    width: 30px; 
    height: 30px; 
    background: #fff; 
    border-radius: 5px; 
    margin-right: 20px; 
    text-align: center; 
} 

.new-frontpage footer .social-icons a i { 
    font-size: 22px; 
    text-align: center; 
    position: relative; 
    top: 5px; 
} 

.new-frontpage footer .social-icons a.tw i { 
    color: #5ea9dd; 
} 

.new-frontpage footer .social-icons a:last-child{ 
    margin-right: 0px; 
} 


@keyframes social-animation { 
    0% { 
    transform: rotate(0deg); 
    } 

    20% { 
    transform: rotate(40deg); 
    } 

    40% { 
    transform: rotate(0deg); 
    } 

    80% { 
    transform: rotate(-40deg); 
    } 

    100% { 
    transform: rotate(0deg); 
    } 
} 

.new-frontpage footer .social-icons a:hover { 
    -ms-animation: social-animation 0.3s linear 0s 1; 
    -o-animation: social-animation 0.3s linear 0s 1; 
    -webkit-animation: social-animation 0.3s linear 0s 1; 
    -moz-animation: social-animation 0.3s linear 0s 1; 
    animation: social-animation 0.3s linear 0s 1; 
} 

Answer 1

Das Problem ist, dass Safari hat Probleme mit

min-height: auto; 

Und das Problem ist fest mit

min-height: 0px;