0

I have a never seen problem on my last website. It's a WordPress site and the theme I made had this problem :

It works fine on all navigators and devices, except on safari for Ipad where only the header of the site (content of the header.php file) is displayed.

I need some one to explain me what is happening there, or may be tell me if debug tools exist (i dev on windows, and i've got an iPad at home).

A demo of the website is there : http://sylvain-galoustoff.com/delim/ I can also upload my theme on gitHub if needed.

Any help is welcome, thank you.

Sylvain71710
  • 47
  • 7

1 Answers1

1

The display: flex; property you're using looks like it's defaulting to display: -webkit-box; and screwing things up.

enter image description here

Anywhere you call display: flex, you'll also want to call display: -webkit-flex;. Reference

For more info on flexbox and safari see here

Ryan Kozak
  • 1,091
  • 6
  • 16
  • 21
  • Thank you Ryan, I was thinking that -webkit-box was the safari's equivalent for flex. I will check for this and i'll tell you. I 'm still confused that it works fine on iPhone and not and Ipad. – Sylvain71710 Jun 17 '17 at 17:57
  • one more thing : how do you debug on safari iOS ? How did you get that screenshot ? – Sylvain71710 Jun 17 '17 at 18:19
  • I use [BrowserStack](https://www.browserstack.com) for cross browser/mobile testing. Here's a shot of how the site looks on an [iPhone 6S](http://i.imgur.com/xNeSZdj.jpg) – Ryan Kozak Jun 17 '17 at 18:57
  • Thank you. I made a lot of changes in my CSS files since your answer, I guess it's why it looks scrappy now on iPhone. I'm still working on it. It seems like it is not flex rules prefixes that are causing problems, but height with % units in a flex-box. Thanks again for your help Ryan :) – Sylvain71710 Jun 18 '17 at 07:16
  • @Sylvain71710 you can debug safari on iOS if you have a Mac – Papershine Jun 19 '17 at 10:42