css - 无法让 flexbox 为 safari 工作(仅)，在其他所有地方都有效

Question

我一直在绞尽脑汁想弄清楚为什么我的页面在 Safari 上显示不正确。它适用于所有其他浏览器，直到我在手机上检查它。

Screenshot on Safari (iPhone X)

我需要添加什么才能使其正常工作？

我试过在线添加自动前缀，没有任何运气......

div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;

}

.container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

}

.left-half {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
    }

.right-half {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.feature-image {
  background-color: #262626;
  -webkit-box-flex: 1.25;
      -ms-flex: 1.25;
          flex: 1.25;
}

.contents {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 2rem;
}   

.contents-bg {
    background: rgba(0,0,0,0.6);
    padding: 2rem;
}

    .cover-image {
max-width:100%;
max-height:auto;
height:-webkit-fit-content;
height:-moz-fit-content;
height:fit-content;
-o-object-fit: cover;
   object-fit: cover;
}
    @media screen and (max-width: 800px) {
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: column;
      flex-flow: column;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.feature-image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}
.cover-image {
max-width:100%;
max-height:auto;
height:auto;
-o-object-fit: cover;
   object-fit: cover;
}
.page-bg {
    background: #262626 url(https://www.bangbang.com.au/wp-content/themes/bang-bang/images/repeat-overlay.png);
    background-position: center 4.6rem;
    background-size: 28%;
    }
}

<!--First Row -->

<section class="container">
<div class="left-half">
<div class="contents"><div class="contents-bg">
<?php the_field('function_one_content'); ?></div>
</div>
  </div>
  <div class="feature-image">
<img src="<?php echo the_field('function_one_image');?>" class="cover-image">
  </div>
</section>

    <section class="container">
     <div class="feature-image">
<img src="<?php echo the_field('function_two_image');?>" class="cover-image">
  </div>
  <div class="right-half">
      <div class="contents"><div class="contents-bg">
          <?php the_field('function_two_content'); ?></div>
    </div>
  </div>
</section>

这是实时站点及其内容的链接.. Here

Answer 1

尝试添加display: -webkit-flexbox;。它适用于大多数情况。