Stałe tła na stronach internetowych, czy to w komponentach hero czy na całych stronach, to więcej niż tylko wybór designu - to statement. Osobiście je uwielbiam i włączenie tej funkcji do mojej strony było bezsprzeczne. Teoretycznie powinno to być najprostszą rzeczą na świecie - wystarczy dodać:
background-attachment: fixed;...i gotowe. Ale ojej, witamy w cudownym świecie programowania cross-platformowego, gdzie urządzenia Apple iOS skutecznie rujnują nasze perfekcyjnie przygotowane plany.
Podczas gdy użytkownicy Windows i Androida żyją sobie beztrosko z płynnie przewijającymi się stałymi tłami, użytkownicy iPhone'ów (a bądźmy szczerzy, to ogromna część naszego społeczeństwa) doświadczają czegoś, co można opisać jedynie jako wizualną katastrofę. To jak próba nauczenia kota pływania - technicznie możliwe, ale rezultaty nie są zbyt urodziwe.
Moja podróż w głąb króliczej nory przeglądarki Safari, rozpoczęła się od niezliczonych godzin researchu. Zanurzyłem się w wątkach Stack Overflow, forach developerskich, postach na blogach i tutorialach na YouTube. Wszyscy wydawali się mieć ten sam problem. To było jak bycie w grupie wsparcia, gdzie każdy dzieli ten sam problem, ale nikt nie ma rozwiązania.
Na jakiś czas zadowoliłem się tym, co wydawało się rozsądnym kompromisem:
/* Style specyficzne dla iOS Safari */
@supports (-webkit-touch-callout: none) {
.hero-section {
background-attachment: scroll;
}
}To sprawiło, że tło zachowywało się na iOS Safari... cóż, przynajmniej nie było kompletnie zepsute. Magiczny efekt przewijania, który sprawia, że stałe tła są tak fascynujące, był kompletnie nieobecny.
Potem przyszła parada "rozwiązań". Najpierw pojawiły się skrypty CDN (skrypty zewnętrzne) obiecujące naprawić wszystkie nasze problemy z Safari. Spojler: nie naprawiły. To było jak próba naprawy przeciekającej łodzi taśmą klejącą - na początku wygląda obiecująco, ale i tak skończysz przemoczony.
Niektórzy developerzy proponowali złożone rozwiązania. Zaczynało się od ustawienia konkretnych metatagów:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Następnie konfiguracja CSS, która wyglądała bardziej jak równanie matematyczne:
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: url('path/to/your/image.jpg') no-repeat center center;
background-size: cover;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
}I na koniec, rozwiązanie JavaScript, które przypominało próbę włamania się do sejfu:
document.addEventListener('scroll', function() {
const background = document.querySelector('.background');
const content = document.querySelector('.content');
const scrollPosition = window.scrollY;
const contentTop = content.offsetTop;
if (scrollPosition >= contentTop) {
background.style.position = 'fixed';
background.style.top = '0';
} else {
background.style.position = 'absolute';
background.style.top = '0';
}
});Było to ekstremalne, przekombinowane i niespodzianka - nie działało. To jak używanie młota pneumatycznego do powieszenia obrazka.
Po zrobieniu kroku wstecz i skupieniu się na innych zadaniach deweloperskich, doznałem olśnienia. Jeśli Safari nie radzi sobie z
background-attachment: fixedz czym sobie radzi? Okazuje się, że nie ma problemu z divami o stałej pozycji. Czasami najprostsze rozwiązania są ukryte na widoku!
Oto eleganckie rozwiązanie, które w końcu zadziałało:
.fixed-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: url('../public/media/heroImage.webp') no-repeat center center;
background-size: cover;
z-index: -1;
}
.hero-section {
position: relative;
z-index: 1;
}Z prostą implementacją diva:
<div className="fixed-bg"></div>Nie posiadając urządzenia z iOS (team Android!), musiałem polegać na mojej odważnej grupie testowej, która wybrała diabelską ścieżkę, entuzjastów Apple. Kiedy pierwszy tester zgłosił sukces, byłem ostrożnie optymistyczny. Kiedy przyszło drugie potwierdzenie, to było jak znalezienie złota.
Więc oto macie - prawdopodobnie najprostsze rozwiązanie problemu stałego tła w Safari, jakie znajdziecie w internecie. Czasami najlepsze rozwiązania to te, które sprawiają, że mówisz: "Dlaczego nie pomyślałem o tym wcześniej?" To przypomnienie, że w web developmencie, jak i w życiu, najprostsza droga jest często najlepsza.
Pamiętaj, gdy Safari daje ci cytryny, zrób diva o stałej pozycji z obrazkiem w tle. To nie jest rozwiązanie, którego się spodziewaliśmy, ale takie, które działa!
