William William - 2 months ago 34
CSS Question

iOS 9.3.5 Issue with Flexbox overlapping content?

I'm having an issue with areas of a website I'm in the middle of developing where I have used Flexbox for the layout. For those with an iOS9 device, I'd love if you could go to www.sparkles-cakes-of-art.co.uk and see the issues first hand. The pages in question are: The homepage, about page, and menu.

This issue doesn't happen on Android phones, or desktop.

Here are some screenshots of the issue if you do not have a device to see it first hand:

Homepage

Here is the CSS that should be affecting it

.flex {
display:-webkit-box;
display:-ms-flexbox;
display:flex;
}

.half {
-webkit-box-flex: 50%;
-ms-flex: 50%;
flex: 50%;
}

.cake-images {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin:20px 0px;
}


Relevant HTML for the homepage issue. If I can find out what is wrong with this I should be able to figure out the other pages:

<section class="flex">
<article class="half">
<p>blah!</p>
</article>
<blockquote class="half main-quote">
<img src="img/quote-in.png" class="quote-in"/>
<p class="quote">blah</p>
<cite class="cite">blah</cite>
<img src="img/quote-out.png" class="quote-out"/>
</blockquote>
</section>
<section class="flex cake-images">
<div class="main-cake-img">
<div class="hidden-hover">
<h2>Weddings</h2>
</div>
<a href="gallery#weddings">
<img src="img/cake-01.png" alt="" />
</a>
</div>
<div class="main-cake-img">
<div class="hidden-hover">
<h2>Birthdays</h2>
</div>
<a href="gallery#birthdays">
<img src="img/cake-02.png" alt="" />
</a>
</div>
<div class="main-cake-img">
<div class="hidden-hover">
<h2>Simplicity Offer</h2>
</div>
<a href="gallery#offer">
<img src="img/cake-03.png" alt="" />
</a>
</div>
</section>


Sorry I can't post more screenshots because of the rep limit.

Answer

Found the issue.

In the media query for phone devices I had this:

.half {
  flex: 100%;
}

I thought this would make the element go to 100% width, so as to only have 1 column. This will break on iOS Safari. Instead use flex: 0 0 0; to achieve the same effect.

Comments