iOS 9.3.5 Flexbox重叠内容问题？

Question

我遇到了一个网站区域问题，我正在开发FlexBuilder的布局。对于那些使用iOS9设备的用户，如果您可以前往www.sparkles-cakes-of-art.co.uk并亲自看到问题，我很乐意。相关页面包括：主页，关于页面和菜单。

在Android手机或桌面上不会发生此问题。

以下是问题的一些截图，如果你没有一个设备，看它的第一手：

Homepage

这里是应该能够影响它

.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; 
} 

相关的CSS主页问题的HTML。如果我能找出什么不对这个我应该能够找出其他网页：

<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> 

对不起，我不能张贴因为代表极限截图。

Answer 1

发现此问题。

在对电话设备的媒体查询我有这样的：

.half { 
    flex: 100%; 
} 

我认为这将使得元素到100％的宽度，以便只有1列。这将在iOS Safari上打破。取而代之的是使用flex: 0 0 0;来达到同样的效果。