prosta strona na bootstrap4 dziwnie wyglada na safari

Question

Responsywna strona oparta czesciowo na bootstrap4 dziala poprawnie na chrome, firefox i  operze jednak na urzadzeniach appla zarowno ipad jak i iphone (Safari w systemie OIS 12.1.) pokazuje polowe kolumny i obrazka tak jak na zalaczonym zdjęciu. Po pogrzebaniu w necie nie bardzo jestem w stanie określić w czym tkwi problem.
stona ma adres   http://www.patio-nieruchomosci.pl/  Bede bardzo zobowiązany za wszelkie sugestie.

  

Krzysiek

Comments

1. wersja safari jest ostatnia- chyba 12. Nie mam iphona wiec grzecznosciowo zapytałem kolegi. Kolega mi mowil  że safari uaktualnia sie atumatycznie do najnowszej wersji wiec szansa na przestarzala przegladarke jest mala. Zreszta sprawdzilem i na innym iphonie - to samo.
2. Obecnie sprawdzalem problem na polecanym BrowserStack. Świetna rzecz choc wlasnie mi sie skonczyl okres darmowego testowania. Pytanie: czy jest cos podobnego w wersji darmowej bo nie znalazłem w necie.
3. W ramach dzialan naprawczych sciagnalem prefixfree (https://leaverou.github.io/prefixfree/) i podpiąłem jako plik JS do projektu jedank nie zadzialal.
4. Nie pomoglo tez dolozenie kodu jaca121212 (ktoremu bardzo dziekuje za wysilek). Wprowadzilem twój kod choc go nie "wkleilem zamiast". Z tego co wiem o prefiksach nie moge miec animacji tylko z prefixem ale rowniez bez prefixu dla przegladarek ktore dzialaja. Prefix jest dla tych przegladarek ktore jeszcze nie rozumieja a zapis bez prefixu musi byc dla innych.
5.  Co zauwazylem podczas obserwacji problemu na BrowserStack. Nie ma problemu z  animacja. Gora strony ktorą wypelnia bootstrapowy jumbotron dziala poprawnie (z malym wyjatkiem). Obraz zaczyna wariowac gdy zjeżdżam do sekcji nizej gdzie mam 3 kolumny ktore na desktopie sa ulozone obok siebie uzywajac bootstrap4 a wskakuja pod siebie na urzadzeniach mobilnych.  Gdy mine te sekcje obraz znow wraca do normy. Jestem dośc przekonany ze nic nie pomylilem w kodzie bo nie chodzilby dobrze na innych przegladarkach wiec tez skaniam sie do tego ze to problem z brakiem czegoś - czyli najpewniej prefixu. Wiem że b4 uzywa flexboxa ale najnowsze wersje safari -jak sprawdzilem na canIuse- dzialaja z flexbox. Czy ktoś mógłby polecić dokładny tutorial odnosnie tego kiedy i jak wstawiac prefixy.?
6. czego nie rozumiem:
transpilacja kodu js- jak wyczytalem jest to przetworzenie kodu na JS ktory czytaja starsze przegladarki. Na razie nie chce sie tym zajmowac bo kod nie dziala na najnowszym safari zatem nie tu tkwi problem. Rzeczy które zaprograowalem w JS zdaje sie ze chodza i uzylem do tego jQuery ktory zdaje sie radzi sobie niezle na roznych przegladarkach.
"sprawdz computed styles i zobacz co tak dokładnie siedzi"- strone sprawdzalem na chrome uzywajac panelu developera i nie wiem co miałbym sprawdzac w computed styles. Problem wystepuje na safari do ktorego nie mam dostepu.
"nie podałeś praktycznie żadnych konkretnych danych"- jakie dane byłyby tu istotne? Myslalem że głowną daną jest kod ktory mozna podejrzec na stronie z linka.

Answer 1

A sprawdzaleś dokładnie jaka wersja sfari i czy czasem nie masz jakiś css, których ona nie obsługuje? To jest często pierwszy krok, sprawdź sobie computed styles i zobacz co tak dokładnie siedzi albo np. na caniuse zweryfikuj problematyczne css jak wygląda ich wsparcie na tej wersi safari. Generalnie do testów frontu polecam BrowserStack, ja jestem z tego mega zadowolony, fajnie szybko sobie można otestować co i jak.

Ewentualnie jeśli nie css to jeszcze może być kwestia np. JS, pytanie do jakiej wersji transpilujesz kod i czy nie ma czasem czegoś, co ta wersja safari by nie obsługiwała, np. jakieś classList itp. itd. Niestety nie podałeś praktycznie żadnych konkretnych danych więc nikt nie wywróży z fusów co jest nie tak :)

Comments

Może to ma jakiś związek z ekranami retina ? Kiedyś na uczelni jedna osoba miała problem z urządzeniami apple i adaptowanie strony pod ekrany z retiną.

Answer 2

Wszystko powinno być okej. Bootstrap jest obsługiwany przez safari. Nie ma to związku z ekranami retina. Musisz mieć coś namieszane w kodzie

Answer 3

Sprawdzałem  twój problem  i na 100% przyczyną tego wszystkiego  są prefiksy  proste  sprawdzenie  z kodem 

/*header*/

#header_poj {

   color: #0057a5;
   opacity: 0.95;
   height: 135px;
   -webkit-border-radius: 10px;


   /* fallback for old browsers */
   background: -webkit-linear-gradient(to right, #FFFDE4, #005AA7);
   /* Chrome 10-25, Safari 5.1-6 */
   background: linear-gradient(to right, #FFFDE4, #005AA7);
   /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}



@-webkit-keyframes zwieksz {
   from {
      width: 2%;
     transform: rotate(0deg);
   }

   to {
      width: 100%;
   transform: rotate(360deg);

   }
}

Wklej  ten fragment  zamiast twojego będziesz widział animację. pierwszego zdjęcia  z lewej strony. 

-webkit-  prefiks  safari