CODEWITHSUNDEEP
htmlcss
Gugel
Gugel

Reputation: 21

transform translateY doesn't work on Safari

It works great on Chrome on my desktop, but it just doesn't do the animation on Safari on my iPhone 8 (both on Safari and Chrome).

Any ideas?

.voting-block {
    padding-top:20px;
  display:inline-block;
}

.voting-block2 {
    cursor:pointer;
    height: 77px;
    width: 74px;
    border: none;
    outline:none;
    display:inline-block;
}

.voting-block2:active {
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
}
<div class="voting-block">
  <img class="voting-block2" src="https://i.ibb.co/gZ73zPm/btn-haha.png" />
</div>

Upvotes: 1

Views: 230

Answers (1)

Gugel
Gugel

Reputation: 21

I figured it out.

I just need to modify the body tag to this: <body ontouchstart="">

iOS Safari doesn't trigger the :active pseudo-class unless a touch event is attached to the element.

Upvotes: 1

Related Questions