W Chrome 22 zachowanie układu elementów position:fixed nieco się różni niż w poprzednich wersjach. Wszystkie elementy position:fixed tworzą teraz nowe konteksty nakładania. Spowoduje to zmianę kolejności nakładania się niektórych stron, co może naruszyć układy stron. Nowy sposób działania odpowiada działaniu przeglądarek WebKit na urządzeniach mobilnych (Safari w iOS i Chrome na Androida).
Układaj co?
Wszyscy znamy atrybut z-index, który służy do określania kolejności elementów na stronie w głąb. Nie wszystkie układy kolejności są jednak równe: z-index elementu określa tylko jego kolejność względem innych elementów w tym samym kontekście. Większość elementów na stronie znajduje się w pojedynczym, nadrzędnym stosie, ale bezwzględnie lub względnie umieszczone elementy z nieautomatycznymi wartościami z-index tworzą własne konteksty skumulowane (oznacza to, że wszystkie elementy podrzędne są w porządku nadrzędnym w porządku nadrzędnym i nie są przeplatane z treściami spoza jednostki nadrzędnej). Od Chrome 22 elementy position:fixed będą też tworzyć własne konteksty układania.
Ogólne informacje o kontekstach warstwowania znajdziesz w tym artykule w MDN.
Porównaj atrybut position:fixed z nowym atrybutem pozycja:przyklejony: position:sticky zawsze tworzy nowy kontekst skumulowania.
Motywacja
Przeglądarki mobilne (Safari na komórki, Android i przeglądarki oparte na Qt) umieszczają elementy „position:fixed” w swoich własnych kontekstach i mają z tym pewien czas przez jakiś czas (od iOS5, Androida Gingerbread itd.), ponieważ umożliwia to optymalizowanie przewijania, dzięki czemu strony internetowe są o wiele bardziej responsywne na dotyk. Ta zmiana została wprowadzona w wersji na komputery z 3 powodów:
- Różne sposoby renderowania w przeglądarkach mobilnych i komputerowych to przeszkoda dla autorów stron internetowych – CSS powinien wszędzie działać tak samo wszędzie.
- W przypadku tabletów nie jest wiadomo, który z algorytmów tworzenia kontekstu – „mobilny” czy „komputerowy” jest bardziej odpowiedni.
- Przeniesienie optymalizacji wydajności przewijania z urządzenia mobilnego na komputer jest korzystne zarówno dla użytkowników, jak i dla autorów.
Szczegóły zmiany
Przykład ilustrujący różne zachowania układu: https://codepen.io/paulirish/pen/CgAof
Po wprowadzeniu zmiany obie wersje będą renderowane tak samo jak wersja po prawej stronie.
W tym przykładzie zielone pole ma wartość z-index: 1, różowe pole z-index: 3, a pomarańczowe – z-index: 2. Niebieskie pole jest przodkiem pomarańczowego pola i ma position:fixed.
Jeśli niebieskie pole ma własny kontekst grupowania, z-index pomarańczowego pola jest obliczane względem kontekstu skumulowania niebieskiego pola. Niebieskie pole ma z-index o wartości auto, co oznacza, że w kontekście warstw głównych pomarańczowe pole znajduje się za zielonymi i różowymi polami, które mają indeks Z-index 1 i 3 (odpowiednio) w kontekście głównym.
Jeśli niebieskie pole nie ma własnego kontekstu grupowania, pole z-index pomarańczowego pola jest obliczane w odniesieniu do kontekstu warstwowego (wraz z zielonymi i różowymi polami). Z tego powodu pomarańczowe pole jest przeplatane różowymi i zielonymi polami.
Więcej informacji o kryteriach tworzenia kontekstu warstwowego (i o ogólnym działaniu kontekstów warstwowych) znajdziesz w tym artykule w MDN. W tym przykładzie wersja po prawej stronie zawsze nadaje niebieskim ramkom kontekst, ponieważ przezroczystość jest mniejsza niż 1. Wprowadzona zmiana działania dodaje kolejne kryterium umożliwiające utworzenie osobnego kontekstu skumulowania, tj. element, który jest umiejscowiony na stałe.
Testowanie i przyszłość
Aby sprawdzić, czy strona się zmieni, otwórz about:flags Chrome i włącz lub wyłącz opcję „Elementy o stałej pozycji tworzą konteksty układania”. Jeśli układ będzie działać tak samo w obu przypadkach, nie musisz nic więcej robić. Jeśli tak nie jest, upewnij się, że przycisk jest dla Ciebie akceptowalny, z włączoną tą flagą, ponieważ będzie to ustawienie domyślne w Chrome 22.
Ta zmiana powoduje usunięcie jednej funkcji – możliwości przeplatania treści w poddrzewie pozycji:stałej z zawartością nieprzewijaną spoza niej. Jest mało prawdopodobne, aby którykolwiek programista stron internetowych robił to celowo. Aby uzyskać ten sam efekt, przypisz wielu elementom position:fix różne części DOM. Przyjrzyjmy się na przykład 2 przykładom:
https://codepen.io/wiltzius/pen/gcjCk
Ta strona próbuje pobrać dwa podrzędne elementy div (nakładkiA i nakładkaB) elementu position:stadion i umieścić jeden nad oddzielnym elementem div treści oraz jeden pod tym samym obiektem div treści. Obecnie nie można tego zrobić, ponieważ element position:fixed stanowi własny kontekst warstwowy i wraz ze wszystkimi elementami podrzędnymi 2 będzie działać w całości powyżej lub całkowicie pod elementem div treści w Chrome 2. Pamiętaj, że ten przykład nie działa już w Chrome 2.
Aby rozwiązać ten problem, można podzielić obie nakładki i wyodrębnić je w elementach position:fixed. Każdy z nich ma własny kontekst (jeden z nich znajduje się nad elementem div treści, a drugi poniżej elementu div treści). Zobacz naprawiony przykład, który działa w Chrome 21 i 22:
https://codepen.io/wiltzius/pen/vhFzG
Udział w pochodzeniu tego przykładu należy do nietypowej hixie.
Chrome jest pierwszą przeglądarką na komputery, która tworzy własne konteksty układania z elementami pozycja:fixed. Odpowiedni standard to specyfikacja kolejności nakładania elementów CSS (np. https://www.w3.org/TR/CSS21/zindex.html). Jeszcze nie ma konsensusu co do różnic między przeglądarkami na komputerach i urządzeniach mobilnych, ale ze względu na nieporozumienie dotyczące 2 odmiennych sposobów działania przeglądarek na urządzeniach mobilnych i komputerach postanowiliśmy na razie zastosować ten sam model na obu platformach.
Aktualizacja 1 października 2012 roku: w oryginalnej wersji tego artykułu zasugerowano, że specyfikacja CSS z-index została już zmieniona, by odzwierciedlić nowy sposób działania elementów stałych. To nieprawda. Zostało to omówione na liście stylów www, ale na razie nie uwzględniono w niej żadnych zmian.