Flexbox and Safari on iOS

[etmartinkazoo]

I am developing a site for a friend which is operating on a really simple Flexbox Grid. There isn’t much to the site at this point, just one page. The site is rendering beautifully on Chrome, Firefox, Safari on my Mac and beautifully on my Android but Safari on iOS is a total mess… I’ve been banging my head against the desk for the last day – gotta stop that :) – and can’t get anywhere.

The index.html and style.css can be found at: https://github.com/etmartinkazoo/evolution

You can see the site at: https://etmartinkazoo.github.io/evolution/

Please, please, please help :)

[Beverleyh]

The simpler layout should help make things easier for you. Try going back to basics – code up your site’s basic grid again from scratch, starting with one or two elements, and test thoroughly between additions of CSS/HTML. You should be able to work out the point at which it fails in Safari, and then focus your attentions there.

If you still find that you need help at that stage, pop the identified problematic HTML and CSS into a basic CodePen demo for us and we can take a look.

[etmartinkazoo]

Hi Beverlyh,

Thanks so much for your response. I’ve been going over the site endlessly for the last 36 hours and totally stuck.

I uploaded the HTML and CSS to Codepen here: http://codepen.io/etmartinkazoo/pen/MJzNgr

Unfortunately I don’t have a pro plan so I can’t upload any assets but the general layout is still there.

Thanks,
Ted

[Beverleyh]

Well the layout looks fine on iPhone now so that’s a clue. Start your research there. One of the assets that you mentioned being unable to add in CodePen must contain something that causes it to fail in Safari.

If you add back logical parts of your assets into the areas provided by CodePen (CSS and JavaScript) and test after each addition, you should be able to narrow down the thing that makes it fail and tackle it directly.

[etmartinkazoo]

It’s still cutting off the top list items and stacking elements over each other on my end… Hmmm…

[Beverleyh]

Seems like it doesn’t display quite so well on iPhone afterall. I’m on vacation with spotty internet connection so things are loading intermittently. Scratch my last post because I can’t trust what I’m seeing at the moment.

[Beverleyh]

Oftentimes, part of the troubleshooting process will involved starting again from the very beginning. If you find that even very basic HTML/CSS gives undesirable results when testing in X browser, it can point to an underlying problem with implementation (maybe a typo?) or a misunderstanding of specs. But this is a good thing because you will have identified the failure-point and be better placed to research further via Google (look at other demos, read more tutorials, etc). Unfortunately, this process is all part and package of developing websites, and you must either go through this time-consuming process yourself, or seek help. The kicker is, knowing how time-consuming this sort of thing can be will put off potential helpers in free online help forums. But if you can show that you’ve gone through much of the troubleshooting process yourself (by creating a basic demo – i.e. just enough markup and CSS to illustrate the problem), it offsets the anticipated time/effort that WE are being asked to contribute, unpaid, to your project.

Alternatively, if you really can’t face putting any more time and effort into troubleshooting yourself, consider hiring somebody to do the work for you.

[etmartinkazoo]

Thanks for your help Beverleyh and I wanted to let you know that I finally figured the issue out. Safari on iOS isn’t playing well with some Flexbox settings; it was working on every other browser both responsive and on laptops. I greatly simplified the Grid to the following and it works now:

.row {
display: flex; }

.col {
flex: 1; }

Thank you again.

[Beverleyh]

Good stuff – glad you sorted it :)

[Author]

Posts