Safariで画像スライダの高さを継承していないDiv

Question

私は、単一ページのWebストアにFlickityスライダを使用しています。デスクトップ画面で親divの高さを100％に設定しました。これはChromeでうまく動作しますが、Safariでのみ動作します。

LINK TO PAGE

HTML：

<div class="product__container"> 
     <div class="product__image--container"> 
      <div class="main-carousel"> 
       <div class="carousel-cell img--two"></div> 
       <div class="carousel-cell img--four"></div> 
       <div class="carousel-cell img--five"></div> 
       <div class="carousel-cell img--one"></div> 
      </div> 
     </div> 
     <div class="product__description--container"> 

      <div class="product__description--aligner"> 

       <h1 class="product__title" style="margin-bottom: 0px; margin-top: 0px;"><strong>MYSTERY BOX</strong></h1> 
       <p class="product__price">$25</p> 
       <p><strong>The stuff:</strong> we spend our days working with cool brands with even cooler products.</p> 
       <p><strong>The selection:</strong> only the coolest of the coolest products make their way into the HRVST Mystery Box.</p> 
       <p><strong>The shipping:</strong> your HRVST Mystery Box will magically show up to your door at the beginning of the month—unless there’s a postal strike.</p> 
       <p>Each month we bring local brands together to offer a handpicked box of Montreal-based products to the first 100 shoppers, delivered to your door. Reserve yours today and never look back.</p> 
       <p><i>Sourced and packed locally. Not for the faint of heart.</i></p> 

       <div id='product-component-83d33f1cc51'></div> 

      </div> 

</div> 

CSS：

.product__container {display: flex; display: -webkit-flex; flex-direction: column-reverse !important; -webkit-flex-direction: column-reverse !important;} 
    .product__image--container, .main-carousel, .flickity-viewport, .carousel-cell {width: 100vw !important; height: 100vw !important;} 
    .product__description--container {width: 100vw !important;} 
    .flickity-prev-next-button {left: calc(100vw - 140px) !important;} 
    div#product-component-83d33f1cc51 {margin: auto !important;} 
} 

.shop__wrapper {display: flex; display: -webkit-flex; flex-direction: column; -webkit-flex-direction: column; background-color: #FFFFFF; position: relative;} 

.product__container {display: flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row;} 
.product__image--container {height: inherit;} 
.main-carousel {height: 100%;} 
.flickity-viewport {height: inherit !important;} 
.flickity-viewport, .carousel-cell {width: 50vw; min-height: 50vw;} 
.carousel-cell {height: inherit;} 
.img--one, .img--two, .img--three, .img--four, .img--five {background-position: center center; background-size: cover;} 
.flickity-prev-next-button { 
    position: relative !important; 
    left: calc(50vw - 140px); 
    top: -60px !important; 
    background-image: url(images/Asset_9.svg) !important; 
    background-position: center center !important; 
    background-repeat: no-repeat !important; 
    background-color: transparent !important; 
    width: 30px !important; 
    height: 30px !important; 
    margin: 10px !important; 
} 
.flickity-prev-next-button:hover {opacity: 0.7;} 
.next {transform: rotate(0deg) !important;} 
.previous {transform: rotate(-180deg) !important;} 
.flickity-prev-next-button svg {display: none;} 
.img--one {background-image: url("images/shop/1.jpg");} 
.img--two {background-image: url("images/shop/2.jpg");} 
.img--three {background-image: url("images/shop/3.jpg");} 
.img--four {background-image: url("images/shop/4.jpg");} 
.img--five {background-image: url("images/shop/5.jpg");} 

Answer 1

これは、ブラウザの互換性エラーのように聞こえます。特に要素が全く動かない場合（あなたの質問は、まったく動作しないのか不思議であるのか不明です。）ブラウザの互換性チェッカーを試してみてください。私はbrowsershots.comが好きですが、チェックできる他の多くの無料ツールがあります。