Nachodzenie na siebie elementów przy animacji 3D w iOS Safari

Question

Cześć :D

Mam taki problem z animacją w moim portfolio. Zrobiłem tam animację 3D, która polega na "odwróceniu karty". I wszystko jest ok, do czasu gdy testowałem tę stronę w przeglądarce Safari na iOS. Tam podczas animacji div nachodził na sticky nav co się nie zdarzało nigdzie indziej. Dziwi mnie to tym bardziej, że jak widać iOS Safari podobno wspiera animacje 3D...

 

<section class="article__container--technology">
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-html5" style="color: #e34f26"></i>
                        <figcaption>HTML</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Znam podstawy SEO i pisania kodu HTML zgodnie ze
                        standardem HTML5. Rozumiem jak ważny jest kod HTML w kwestii dostępności strony internetowej.
                    </div>
                </div>
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-css3-alt" style="color: #002561"></i>
                        <figcaption>CSS</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Potrafię pisać responsywne style w CSS3 z
                        wykorzystaniem animacji. Wiem, że używanie display: float zamiast Flexbox`a lub Grid`a to zły
                        pomysł. Umiem też posługiwać się podstawowym SASS`em.</div>
                </div>
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-js-square" style="color: #f7df1e"></i>
                        <figcaption>JavaScript</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Staram się by mój kod JS był zgodny ze standardem
                        ES6. Potrafię wykonywać proste asynchroniczne zapytania za pomocą AJAX.</div>
                </div>
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-php" style="color: #4f5b93"></i>
                        <figcaption>PHP & MySQL</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Poznałem podstawy języka PHP w celu komunikacji z
                        serwerem. Znam też proste zapytania MySQL do bazy.</div>
                </div>
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-git" style="color: #333"></i>
                        <figcaption>Git</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Zdaję sobie sprawę z tego, jak bardzo Git jest ważny
                        w pracy programisty. Staram się także odpowiednio nazywać commity :)</div>
                </div>
                <div class="article__technology">
                    <figure class="article__card article__card--front">
                        <i class="fab fa-npm" style="color: #cb3837"></i>
                        <figcaption>NPM & Webpack</figcaption>
                    </figure>
                    <div class="article__card article__card--back">Korzystam z Webpack`a w celu lepszej organizacji
                        pracy. Wykorzystuję Babel i autoprefixer dla lepszej zgodności ze starszymi wersjami
                        przeglądarek.</div>
                 </div>
</section>

.article__technology {
      width: 100%;
      height: 60vh;
      transition: transform 1s;
      transform-style: preserve-3d;
      position: relative;
      z-index: 2;

      .article__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        padding: 15px;
        width: 100%;
        height: 100%;
        text-align: center;
        backface-visibility: hidden;
        border-radius: 10px;
        box-shadow: 17px 11px 10px -1px rgba(0, 0, 0, 0.75);
      }

      .article__card--front {
        background-color: $card_cl;
        transition: all 0.4s ease-in-out;
      }

      .article__card--front:hover {
        cursor: pointer;
        background-color: darken($card_cl, 10%);
      }

      .article__card--back {
        background-color: darken($card_cl, 20%);
        transform: rotateY(180deg);
      }

      .article__card--back:hover {
        cursor: pointer;
      }
    }