图像不在Safari移动网络上的中心

Question

我对图像实现了CSS动画，并且通过PC在资源管理器或Chrome上运行良好。

但是，在Safari上，图像放在左上角。由于我使用的位置：绝对和亲戚进行动画，因此我无法使用Display：Flex选项。

另外，从下面的SS中可以看到，卡片大小也不适合CSS中的应用，并且在卡和按钮之间具有怪异的空间。

Safari上的当前状态

这是我当前的代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}


.container {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url("../../images/background-forloading.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.flip-card {
  width: 100%;
  height: 80vh;
  perspective: 1600px;
  cursor: pointer;
  transform: translateY(40px) rotateX(-8deg) rotateY(10deg);
  animation: movement 5s infinite;
}

@keyframes movement {
  50% {
    transform: translateY(-40px) rotateX(8deg) rotateY(-10deg);
  }
}

.flip-card div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  backface-visibility: hidden;
  transition: 0.7s;
  width: 100vw;
  height: 80vh;

}

.flip-card div img {
  width: 100vw;
  height: 80vh;
  object-fit: contain;
}


.front {
  filter: drop-shadow(0 0 30px #000);
}

.back {
  transform: rotateY(180deg);
}


.flip-card:hover .front {
  transform: rotateY(-180deg);
}

.flip-card:hover .back {
  transform: rotateY(0);
  filter: drop-shadow(0 0 20px rgb(120, 185, 232));
}

<div class="container">
    <div class="flip-card">
      <div class="front">
        <img src="images/귀문관카드뒤.png">
      </div>
      <div class="back">
        <img src="images/인간.png">
      </div>
    </div>
    <div class="flip-card-button text-center">
    <a href="images/인간.png" download="인간.png"><button class="enter">Save</button></a>
    <a href="final.html"><button type="submit" class="enter">Next</button></a>
  </div>
  </div>

Answer 1

我不确定是否可以解决您的问题，但是您的代码当前缺少浏览器前缀。

• -webkit-用于Chrome，Safari，Opera，ios
• -Moz- firefox
• -MS- Internet Explorer和Edge