Błędy stylów CSS w Safari to usterki wyświetlania wynikające ze specyfiki silnika renderującego tej przeglądarki.
Skąd biorą się różnice w renderowaniu CSS w Safari
Błędy stylów CSS w Safari pojawiają się wtedy, gdy arkusz stylów wykorzystuje reguły interpretowane inaczej przez silnik WebKit niż przez silniki Chromium lub Gecko. Safari korzysta z WebKit, dlatego końcowy wygląd strony zależy nie tylko od poprawności składni CSS, lecz także od stopnia implementacji danej funkcji w konkretnej wersji przeglądarki. Ten sam kod może więc prawidłowo ustawiać elementy w jednej przeglądarce, a w Safari powodować przesunięcie, brak wysokości kontenera, nieprawidłowe zawijanie tekstu albo niewidoczne tło.
Częstym źródłem problemów jest użycie właściwości eksperymentalnych, niepełnej implementacji standardu lub składni wymagającej prefiksu producenta. W starszych wydaniach Safari znaczenie mogły mieć między innymi prefiksy -webkit-, sposób obsługi appearance, zachowanie pól formularzy oraz interpretacja jednostek zależnych od obszaru widoku. Nie oznacza to, że dodanie prefiksu zawsze rozwiązuje problem. Najpierw trzeba ustalić, czy dana właściwość jest obsługiwana, czy jej wartość jest poprawna oraz czy inna reguła CSS nie nadpisuje oczekiwanego efektu.
Układy flex i grid pod kontrolą WebKit
Problemy widoczne w Safari często dotyczą układów flex i grid. W kontenerze flex element może nie zmniejszać się zgodnie z oczekiwaniem, gdy jego zawartość ma domyślne min-width: auto. Skutkiem bywa wychodzenie długiego tekstu poza kartę lub pojawienie się poziomego przewijania. W takim przypadku pomocne może być świadome ustawienie min-width: 0 na elemencie flex, ale decyzję należy poprzedzić sprawdzeniem zależności między szerokością rodzica, flex-basis, flex-grow i flex-shrink.
W układzie CSS Grid znaczenie ma między innymi sposób obliczania rozmiaru kolumn i wierszy oraz zależność między zawartością a wymiarem minimalnym. Warto porównywać zachowanie deklaracji takich jak minmax(), auto-fit i auto-fill w aktualnie używanej wersji Safari. Nieprawidłowy rezultat nie musi wynikać z samego grida: wysokość rodzica może być nieokreślona, element może znajdować się w kontekście formatowania z własnym ograniczeniem albo reguła overflow może ukrywać część układu. Diagnostyka powinna obejmować obliczone wartości CSS, a nie wyłącznie kod zapisany w arkuszu.
Viewport, pozycjonowanie i formularze w Safari
Safari w wersji na urządzenia mobilne dodatkowo uwidacznia różnice związane z obszarem widoku. Pasek adresu oraz dolny pasek narzędzi zmieniają dostępną wysokość podczas przewijania, dlatego element o wysokości 100vh może nie odpowiadać aktualnie widocznemu obszarowi. W nowszych standardach CSS istnieją jednostki svh, lvh i dvh, które rozróżniają odpowiednio mały, duży i dynamiczny wymiar widoku. Dobór jednostki powinien wynikać z funkcji elementu: pełnoekranowy panel, sekcja aplikacji i element zajmujący bezpieczny obszar mogą wymagać różnych zasad.
Osobną grupę stanowią elementy z position: fixed lub position: sticky, szczególnie umieszczone wewnątrz kontenera z transform, overflow albo inną właściwością tworzącą nowy kontekst. W Safari może to zmienić punkt odniesienia lub ograniczyć obszar przyklejania. Należy również sprawdzić obszar bezpieczny urządzeń z wycięciem ekranu, stosując zmienne env(safe-area-inset-top) i podobne wartości tam, gdzie element styka się z krawędzią ekranu. Formularze mogą wyglądać inaczej z powodu natywnego wyglądu kontrolek; appearance: none pozwala ograniczyć tę ingerencję, lecz wymaga samodzielnego zapewnienia widocznego stanu fokusu, etykiet i odpowiedniego kontrastu.
Metody wykrywania i usuwania niezgodności
Rzetelne rozpoznanie błędu zaczyna się od odtworzenia problemu w konkretnej wersji Safari i na konkretnym typie urządzenia. Należy porównać szerokość okna, skalowanie strony, orientację ekranu, stan przewijania oraz zachowanie po zmianie widoczności pasków przeglądarki. W Narzędziach deweloperskich Safari można sprawdzić reguły elementu, wartości obliczone, aktywne media queries i strukturę drzewa DOM. Jeżeli problem występuje tylko po załadowaniu strony, trzeba przeanalizować także moment dołączenia arkuszy, kolejność reguł oraz klasy dodawane przez JavaScript.
Naprawa powinna polegać na zawężonej zmianie, której efekt można sprawdzić w kilku rozmiarach ekranu. Przydatne są jawne wartości min-width, min-height, box-sizing, kontrola overflow, poprawne ograniczenie obrazów oraz unikanie zależności od nieustalonej wysokości rodzica. Dla funkcji o różnym poziomie obsługi można zastosować @supports, aby wprowadzić wariant zapasowy tylko tam, gdzie jest potrzebny. Warszawskie Pogotowie Komputerowe wykonuje profesjonalną diagnostykę i naprawę laptopów oraz komputerów PC, w tym problemów z oprogramowaniem i wyświetlaniem stron internetowych w Safari.
