Streaming live at 10am (PST)

Flexbox rendering issue on Safari iOS9


#1

Hey guys,

There is a grid layout on my website that looks weird in iPhone safari browser. I have attached the screenshots.

Here is the link to the website - marketing-manager-v2.webflow.io

Can you please help me fix this?


#2

@rkoomera Could you please update your post with some more information so we can help you faster? Such as sharing your Read-Only link.

How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :slight_smile:


#3

Sure. Here you go.

https://preview.webflow.com/preview/marketing-manager-v2?preview=b139d41d37b0095ee58aeba92bd25da7


#4

Hi @rkoomera, thanks for the read-only link, I think there is a flexbox rendering issue there in iOS with the way the styling is set currently, however a few changes should help. I would use some columns for the features content and remove some of the flex styling.

Take a peek at a quick video:

I hope this helps!


#5

@cyberdave
just wondering .. what dev tool software is that you use for emulating that mobile site ? :slight_smile:


#6

Hi @Daniel_Schultheiss, I use Browserstack.com, although it is not perfect for the latest bleeding edge cases (sometimes), it is pretty much dead on most of the time :slight_smile:

One thing is nice about Browserstack, you can get the real Phone view, and open the css inspector at the same time on mobile, to quickly identify the issues.


#7

Awesome man! It worked!! Thank you so much for your help.


#8

so, i understand that flex layout caused the issue in iOS browser. Is there a way I could still get the boxes to have same height and width?


#9

This topic was automatically closed after 60 days. New replies are no longer allowed.