iOS 9.3.5 Flexbox 콘텐츠가 겹치는 문제가 있습니까?

레이아웃에 Flexbox를 사용한 개발중인 웹 사이트 영역에 문제가 있습니다. 당신이 갈 수있는 경우 iOS9 장치와 사람들을 위해, 나는 사랑을 거라고 www.sparkles-cakes-of-art.co.uk 하고 문제를 먼저 손을 참조하십시오. 문제의 페이지는 홈페이지, 정보 페이지 및 메뉴입니다.

이 문제는 Android 휴대폰이나 데스크톱에서는 발생하지 않습니다.

다음은 문제를 직접 볼 수있는 기기가없는 경우의 일부 스크린 샷입니다.

홈페이지

영향을 미칠 CSS는 다음과 같습니다.

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

홈페이지 문제와 관련된 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>

담당자 제한으로 인해 더 이상 스크린 샷을 게시 할 수 없습니다.