Witam.
Naskrobałem sobie taką templatkę, ale mam problem…
Resposive jest, na Androidzie super, ale na Iphone kompletnie nie scaluje góry…
Może ktoś znajdzie rozwiązanie.
Podaje Adres, kod każdy wyciągnie.
Nie każdy ma pod ręką iPhona, żeby zobaczyć w czym problem. Dodaj zrzut ekranu z telefonu.
1 polubienie
Od biedy może trial browerstack ich emulator iPhone na macOS - z poziomu nowoczesnej przeglądarki internetowej?
Jak tak patrzę na emulatorze (iPhone 6S, iOS 9 - nowszej nie ma za darmo), to ma jakoś dziwnie rozciągnięte tła na jakiś bok (lewy górny?).
|
|
Safari i inne na niej oparte |
|
|
po lekkim przewinięciu w nakładce chrome |
|
|
Firefox 60 symulacja mobile |
Dokładnie tak to wygląda na iOS, natomiast na androidzie nie ma problemu.
Przepraszam za nie wstawienie screnow.
Jakbym nie kombinował z wartościami obrazka, to efekt wyjściowy jest jak widać.
Moze problem lezy w tym ze jest to slider.
https://caniuse.com/#search=background-size
Na samym dole - Know Issues:
iOS Safari has buggy behavior with background-size: cover; + background-attachment: fixed;
iOS Safari has buggy behavior with background-size: cover; on a page’s body.
@krystian3w - dzięki, nie znałem narzędzia. Mam mieszane uczucia co do nich bo kiedyś gdy więcej pisałem frontu narzędzia tego typu były kiepskie. Tutaj jednak wygląda, że fajnie to jest już ogarnięte. Dobrze wiedzieć 
.
Nie zmienia to faktu, że ss’y się przydały bo nie zamierzałem się rejestrować.
1 polubienie
Dziękuje za pomoc, ale jezeli safari nie rozumie parametru rozmiaru to czym go zastąpic…
Z tego wynika że nie powinienem stosowac praktycznie zadnych parametrow i zostawic obrazek sam sobie
Są stare metody na uzyskanie podobnego efektu. Gorzej będzie z fixed, ale myślę, że też da się to ogarnąć. Nie rezygnowałbym jednak z obecnych styli tylko dodał odpowiednie media queriues dla safari by to jakoś wyglądało.
Poszukaj w google, nie wierze, że na całym świecie tylko Ty napotkałeś problem z safari . Na pewno są gotowe przykładowe rozwiązania i obejścia tego problemu właśnie na iOS’a.
PS. Może trzeba będzie dodać mały kawałek kodu dla Safari, ale to też nie problem.
1 polubienie
Albo wywalić bg… lub, nadać bg tabeli, a tabele zamiast obrazka, jak myślisz ?
Nie bardzo wiem co masz na myśli, ale skoro chcesz coś zrobić w tabeli to od razu uważam, że to kiepski pomysł 
. Da się to ogarnąć za pomocą CSS bez modyfikacji HTML.
EDIT:
Rezygnowanie z jakiegoś elementu strony tylko ze względu na jakieś trudności też jest moim zdaniem kiepskim pomysłem.
Udało się wywalczyć coś
W skrócie, Jak damy każdej możliwej innej przeglądarce pudełko i obraz większy niż ono same, to pomyśli i złoży go tak żeby pasował do pudełka.
Niestety Safari takie zmyślne nie jest i trzeba było dodać
@media (max-width: 767px) {
.bd-imagelink-2 {
width: 100vw;
height: 100vh;
left: 4%;Zerknąłem na szybko w kod i coś mi nie pasuje, dalej masz grafikę jako background, ale dodatkowo wyświetlasz ją jako img. Powinieneś też zastosować konkretne style tylko dla safari, a dla reszty przeglądarek zostawić bg-cover.
1 polubienie