CSS Parallax Obraz w tle Biała przestrzeń w IE

Question

Używam metody tworzenia dwuwarstwowego efektu paralaksy, aby obraz tła przewijał się wolniej niż reszta zawartości witryny. Dla jasności obraz obejmuje całą stronę, a zawartość znajduje się na wierzchu.

Moja witryna jest podzielona na dwa główne elementy: div (i kontener div) - jeden dla obrazu tła, a drugi dla zawartości strony. Poniżej znajduje się kod, którego używałem dla różnych elementów div.

.container { 
    height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    perspective: 1px; 
    position: absolute; 
    left: 0; 
    right: 0; 
} 

.background { 
    background-image: url(images/background.jpg); 
    background-size: cover; 
    position: absolute; 
    /* margin-bottom: -200em; 
    overflow: hidden; */ 
    height: 200em; 
    left: 0; 
    right: 0; 
    transform: translateZ(-2px) scale(3); 
} 

.page-content { 
    transform: translateZ(0); 
} 

Bez margin-bottom i overflow właściwości dodany element tła div by skończyć posiadające pionowe białe miejsca z lewej strony na raz została ona ustawiona na wysokości wystarczająco wysoki, aby pokryć wszystkie treści dla strony.

Po dodaniu marginesu ujemnego problem został naprawiony w przeglądarce Chrome i nieco w Firefoksie *, a zwiększyłem wysokość i margines ujemny elementu div, aby uzyskać znacznie więcej, niż wymagało to sprawdzenie, czy działałoby na innej stronie długości.

IE 11 wciąż ma tam białą przestrzeń. Zwykle właściwość background-size: cover; usuwa wszelkie białe znaki, ale nie działa to z efektem paralaksy.

Czy znasz jakieś sposoby na usunięcie białej przestrzeni, która zadziałałaby dla IE9 + i innych popularnych przeglądarek, czy też mam pecha?

Oto JSFiddle z prawie dokładnie tym samym kodem co strona, którą tworzę.

* Firefox nie ma spacji, ale margines ujemny nie działa poprawnie dla wszystkich długości stron. W przypadku krótszych stron można przewinąć drogę do końca zawartości strony. Mógłbym to naprawić, zmieniając wysokość i margines dla każdej strony, ale globalne rozwiązanie byłoby mile widziane, jeśli to możliwe.

Answer 1

Nie ma żadnego sposobu, aby uzyskać CSS paralaksy pracować w IE, jeszcze. Ale ponieważ przeglądarki oparte na Webkit, takie jak Chrome i Opera (nie testowałem Safari) działają dobrze z paralaksą, możliwe jest kierowanie na przeglądarki Webkit i wyświetlanie tła paralaksy oraz wyświetlania różnych kodów - bez paralaksy - dla innych przeglądarek.

pierwsze, umieścić kod paralaksy wewnątrz @media zapytaniami, tak:

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { 
    .container { 
    [rule contents] 
    } 

    .background { 
    [rule contents] 
    } 

    .page-content { 
    [rule contents] 
    } 
} 

Pierwszy atrybut (-webkit-min-device-pixel-ratio:0) cele wszystkich przeglądarek opartych na silniku WebKit, ale ponieważ zakładam nie wszystkie wersje przeglądarek WebKit będzie wspierać ten paralaksy Efektem dodałem także drugi atrybut, który ogranicza przeglądarki do Chrome 29+ and Opera 16+ (wykluczyłem Safari, aby być bezpiecznym, ale możesz też choose another hack, który również kieruje Safari, jeśli się okaże, że działa).

Prawdopodobnie byłoby o wiele lepszym pomysłem użycie feature detection, ale nie nauczyłem się jeszcze JavaScript, a powyższe jest rozwiązaniem tylko CSS.

Po wprowadzeniu reguł paralaksy w zapytaniu @media, ustawiam alternatywną regułę domyślną dla elementu z powrotem div.

(Choć podziału terenu do przedniej i tylnej div elementów nie jest konieczne, bez paralaksy, ustawianie tylną div elementu z obrazu tła zamiast body lub html eliminuje mnóstwo lag.)

Aby zachować jak najwięcej podobieństw do wersji paralaksy, ustawiam obraz tła na position: fixed.

Ponieważ przeglądarki odczytać za pośrednictwem pliku CSS top-down i zastosować style w tej kolejności, ważne jest, aby mieć paralaksy .back regułę (i jego otoczenie @media zapytanie) pochodzących po standard, bez paralaksy .back reguła w plik.

I oczywiście upewniłem się, że wszystkie atrybuty, które były stosowane zarówno do reguł standardowych, jak i paralaksy, były dostępne tylko w domyślnym dla zaoszczędzenia miejsca (byłyby stosowane przez przeglądarki Webkit wraz z dodatkowymi regułami w paralaksie) wersja).

Answer 2

Myślę, że masz kilka problemów, jeśli Twoim celem jest wykonanie tej pracy na IE9. Działa to dla mnie, ale nie bez zwiększenia wysokości elementu .back div.

To działa dla mnie w IE9 i Chrome, ale może po prostu chcesz niektórych warunkowych IE.

http://jsfiddle.net/Lawrg9mv/21/

Dodatki:

.back { 
    height: 80em; 
    -ms-transform: translateZ(-2px) scale(3); 
} 

.front { 
    -ms-transform: translateZ(0); 
    z-index: 10; 
    position: relative; 
}