Мой баннер не отображается в Safari 5.1.7

Question

This page Я разрабатываю имеет другое расположение на Safari, чем Chrome/Firefox

• Here is how it looks in Safari
• Here is how it looks in Firefox

Как вы можете видеть, верхний баннер не отображается в Safari, и я думаю, что это из-за параллакса CSS, который я добавил для баннера, если я не совсем ошибаюсь.

Вот CSS:

.slide { 
    position: relative; 
    padding: 15vh 1%; 
    min-height: 100vh; 
    width: 100vw; 
    box-sizing: border-box; 
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); 
    transform-style: inherit; 
} 

.slide:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left:0; 
    right:0; 
} 

.title { 
    width: 50%; 
    padding: 5%; 
    border-radius: 5px; 
    background: rgba(240,230,220, .7); 
    box-shadow: 0 0 8px rgba(0, 0, 0, .7); 
} 

.slide:nth-child(2n) .title { 
    margin-left: 0; 
    margin-right: auto; 
} 

.slide:nth-child(2n+1) .title { 
    margin-left: auto; 
    margin-right: 0; 
} 

.slide, .slide:before { 
    background: 50% 50%/cover; 
} 

#title { 
    background-image: url("http://bildeopplaster.no/8Kk"); 
    background-attachment: fixed; 
} 

.carsonshold { position: relative; width: 100%; display: block; border-bottom: 1px solid #ccc; } 
.carsonshold img { padding: 20px; display: block; border: none; } 
#thesedays { padding: 10px 20px; margin: 40px 0; background: #fff; border: 1px solid #ccc; } 
#results { padding: 10px 20px; background: #fff; border: 1px solid #ccc; font-family: monospace; } 

.text-link { 
    border: none; 
    background: none; 
    padding: 0; 
    margin: 0; 
    font-size: 0.85em; 
    cursor: pointer; 
} 

Может кто-нибудь понять, почему баннер не отображается на сафари или что я здесь отсутствует?

Answer 1

Первый выпуск - вы используете vh единиц для этого элемента. К сожалению, Safari не поддерживала vh и vw единиц до версии 6 (без изменений в версии 6.1).

Вторая проблема заключается в том, что вы используете парную стоимость недвижимости background: 50% 50%/cover;. Это также не поддерживается в Safari 5.1.7. Вам необходимо удалить бит / cover, чтобы он работал в Safari 5.1.7. Safari 5.1.7 должен поддержка background-size: cover;, но похоже, что он не поддерживает сокращенную версию, которую вы пытаетесь использовать здесь.

Используя эти значения будут исправить это, более или менее:

.slide, .slide::before { 
    background: 50% 50%; 
} 

.slide { 
    padding: 15%; 
    min-height: 100%; 
    width: 100%; 
} 

С этим сказанным, это не должно быть проблемой, потому что люди, которые используют Safari в качестве основного браузера, вероятно, будет на OS X, что означает, что они будут на более новой версии Safari. Вряд ли кто-нибудь будет использовать Safari в Windows для своего главного браузера. Опять же, это возможно, учитывая, что есть еще пользователи Opera 12 ...