'Image is not in center on safari mobile web

I implemented css animation to the image and it works well on explorer or chrome through the pc.

Though, on safari, the image is placed in the left top corner. Since I'm using position: absolute and relative for animation, I can't use display:flex option.

Plus, as you can see from below ss, card size is also not fit as applied in css, and have weird space between card and buttons.

current status on safari

Here is my current code:

* {
  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>
cssanimationmobilesafaricss-animations


Solution 1:[1]

I'm not sure if it solves your problem, but your code is currently missing the browser prefixes.

  • -webkit- for Chrome, Safari, Opera, iOS
  • -moz- Firefox
  • -ms- Internet Explorer and Edge

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dani3le_

Related Questions