CSS transform "animation" not working on IOS

Issue

I have made a JSFiddle to showcase my problem. As you can see, on the browser it is working perfectly. But on IOS the animations just don't show. It's flickering and not animating at all. I have tried a lot of solutions as you can see in the CSS code. But still it's not working properly. What did I do wrong or what am I missing?

function addLike(e) {

  var counter = document.getElementById(`counterHeart`);

  counter.className = 'counter-up';
  setTimeout(() => {
    counter.className = 'counter-down';
  }, 50);
  setTimeout(() => {
    counter.className = 'counter-initial';
  }, 100);

}

.post_content_tools_button_like {
  display: flex;
  border-radius: 100px;
  background-color: transparent;
  text-align: center;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  cursor: pointer;
  padding: 4px 12px;
  color: rgb(191 197 208);
  -webkit-user-select: none;
  /* Safari */
  -ms-user-select: none;
  /* IE 10 and IE 11 */
  user-select: none;
  /* Standard syntax */
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.post_content_tools_button_like.heart.active {
  color: rgb(34, 197, 94) !important;
}

.post_content_tools_button_like.heart:hover {
  color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.15);
}

.counter-up {
  display: inline-flex;
  opacity: 0;
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-transform: translate3d(0, -10px, 0);
  -webkit-transform: translate3d(0, -10px, 0);
  -moz-transform: translate3d(0, -10px, 0);
  -o-transform: translate3d(0, -10px, 0);
  transform: translate3d(0, -10px, 0);
  -ms-transition: all 0.05s ease-in-out;
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
}

.counter-down {
  display: inline-flex;
  opacity: 0;
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-transform: translate3d(0, 10px, 0);
  -webkit-transform: translate3d(0, 10px, 0);
  -moz-transform: translate3d(0, 10px, 0);
  -o-transform: translate3d(0, 10px, 0);
  transform: translate3d(0, 10px, 0);
  -ms-transition: all 0.05s ease-in-out;
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
}

.counter-initial {
  display: inline-flex;
  opacity: 1;
  -ms-perspective: 1000;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
  -ms-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -ms-transform: translate3d(0, 0px, 0);
  -webkit-transform: translate3d(0, 0px, 0);
  -moz-transform: translate3d(0, 0px, 0);
  -o-transform: translate3d(0, 0px, 0);
  transform: translate3d(0, 0px, 0);
  -ms-transition: all 0.05s ease-in-out;
  -webkit-transition: all 0.05s ease-in-out;
  -moz-transition: all 0.05s ease-in-out;
  -o-transition: all 0.05s ease-in-out;
  transition: all 0.05s ease-in-out;
}

<div id='likeButton' class='post_content_tools_button_like heart' onclick={addLike()}>
  <span>
        <i class='fa-heart me-2' />
        <span id='counterHeart'>100</span>
  </span>
</div>

Here's the JSFiddle: [jsfiddle]: https://jsfiddle.net/0urgtf51

Thanks in advance :)

I tried adding these lines:

-ms-perspective: 1000;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;

-ms-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;

And changing translate to translate3d

None of these methods were working for IOS

Solution

A few tips:

Vendor prefixes are not usually required nowadays.

They are not required for perspective, backface-visibility, or transition. -webkit- is required for user-select on Safari.

Animations are going to be more consistent if you use CSS animations. Then you can just add a class on click, and remove on animation end.

Note: This example doesn't include any 3d aspects so I removed perspective and backface-visibility and switched translate3d to just translate

I've also removed the line transition: all 0.15s ease; in the class .post_content_tools_button_like because it's not doing anything and may be misleading to others reading this.

function addLike() {
  const counter = document.getElementById('counterHeart');
  counter.classList.add('animate-counter');
  counter.addEventListener(
    'animationend',
    (ev) => {
      // Check is required if the element has more than one animation
      if (ev.animationName === 'counter')
        counter.classList.remove('animate-counter');
    },
    { once: true }
  );
}

.post_content_tools_button_like {
  display: flex;
  border-radius: 100px;
  background-color: transparent;
  text-align: center;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px 12px;
  color: rgb(191 197 208);
  /* Safari */
  -webkit-user-select: none;
  user-select: none;
}

.post_content_tools_button_like.heart.active {
  color: rgb(34, 197, 94) !important;
}

.post_content_tools_button_like.heart:hover {
  color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.15);
}

.animate-counter {
  display: inline-flex;
  animation: counter 0.4s ease-in-out;
}

@keyframes counter {
  33% {
    opacity: 0;
    transform: translate(0, -10px);
  }
  66% {
    opacity: 0;
    transform: translate(0, 10px);
  }
  100% {
    opacity: 1;
  }
}

<div
  id="likeButton"
  class="post_content_tools_button_like heart"
  onclick="{addLike()}"
>
  <span>
    <i class="fa-heart me-2" />
    <span id="counterHeart">100</span>
  </span>
</div>

Answered By - Chris Hamilton