Element strony rozmazany na iPhone

Question

Witam. Zrobiłem stronę dla klienta. Testowałem ją pod kątem rosponsywności na narzędziach developerskich i było w miare ok. Kiedy wrzuciłem stronę na hosting i sprawdziłem to na dwóch iphonach to zdjęcie w headerze jest rozmazane. Co może być tego przyczyną? Na androidach wyświetla się dobrze. Poniżej link do strony i screen z androida i IOS

http://www.stolarniapika.pl/

https://ibb.co/ZLzvrcL
https://ibb.co/gm7D7nR

Comments

Pokaż kod css dla tego obrazka.

---

header {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url('img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.bg {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    overflow-x: hidden;
}

na obrazek jest jeszcze nałożony div z filtrem to jest ta klasa .bg

Answer 1

header {
    position: relative;
    height: 100vh;
    max-width: 100%;
    background: url('img/bg.jpg') no-repeat center;
    background-size: cover !important;
}

Spróbuj tego.

Comments

Kolejna propozycja w edytowanym pliku.

---

Dalej nic

---

Problem rozwiązany. Chociaż nie do końca. Chodzi o background attachment fixed. Kiedy to usunąłem to już działa dobrze. Teraz musze znaleźć sposób jak wyłączyć to tylko na safari

---

Hm, w pierwszej wersji mówiłem, aby tamto usunąć. 

Co do aktualnego problemu przeczytaj ten wątek safari only powinien rozwiązać Twój problem. 

---

Już znalazłem na stackoverflow rozwiązanie tego problemu. Wystarczy 2 linijki JSa i jedna klasa w CSS i wszystko śmiga. Szkoda tylko że trzeba zrezygnować z parallaxa na apple