Переходный div показан над другим div, когда он всегда должен быть ниже (в Safari) - PullRequest
Новая
       76

Переходный div показан над другим div, когда он всегда должен быть ниже (в Safari)

1 голос
/ 20 марта 2020

У меня есть флип-карта с переходом transform: rotateY( 180deg );, в правом нижнем углу этой карты есть div с иконкой внутри. Этот значок всегда должен быть над картой, но в Safari, во время перехода, он кажется ниже карты div. Когда переход заканчивается, он возвращается наверх. Я попытался использовать z-index без изменений.

CSS: 

.neutral-unit-box {
  background-color: #000;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 270px 570px;
  border-radius: 12px;
  color: white;
  font-size: 0.8rem;
  font-weight: bold;
  height: 600px;
  margin-bottom: 4px;
  padding: 24px 24px 24px 24px;
  position: relative;
  text-shadow:
  0px 0px 2px #000,
  0px 0px 2px #000,
  0px 0px 2px #000,
  0px 0px 2px #000;
  width: 300px;
}

.loyalty-card-content {
  position: relative;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.loyalty-card.flipped .loyalty-card-content {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.neutral-unit-box, .neutral-unit-box-back {
  -webkit-backface-visibility: visible; /* Chrome */
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  -transform: translate3d(0,0,0); /* Chrome */
  -webkit-transform: translate3d(0,0,0); /* Chrome */
}

.neutral-unit-box-back {
  position: absolute;
  top: 0;
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

.flip-card-icon {
  background-image: url(/img/neutrals/flip-card-icon.png);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  opacity: 0.5;
  position: absolute;
  right: 0;
  height: 50px;
  width: 50px;
}

HTML

<div id="loyalty-card-<%= _.kebabCase(key) %>" class="loyalty-card" onclick="flip('<%= _.kebabCase(key) %>');">
                <div class="loyalty-card-content">
                  <div class="unit-box mx-auto pt-4 background-<%= type %>">
                    <div class="neutral-unit-name text-center">
                      <h1><%= key %><% if ('tot' in unit[key]){ %><sup>(<%= unit[key].tot %>)</sup><% } else { %><% } %></h1>
                    </div>
                    <div class="neutral-unit-sil mx-auto" style="background-image: url(/img/bg.png)">
                    </div>
                    <div class="loyalty-card-body <% if (!("requirement" in unit[key])) { %>no-spellbook<% } %> <%= type %>">

                      <p class="text-center"><span class="combat-color">Combat: <%- unit[key].combat %></span></p>
                      <% } %>
                      <div clas='ability'>
                        <p><%- unit[key].ability %></p>
                      </div>
                    </div>
                  </div>

                  <div class="neutral-unit-box unit-box-back background-<%= type %>">
                    <p> ok </p>
                  </div>

                </div>
                <div class='flip-card-icon'></div>
              </div>
...