翻转动画-CSS-移动浏览器

Question

I created a Fiddle:

https://jsfiddle.net/6zkmg2cn/

I tried to add code but it wouldn't show the HTML from the fiddle?

This fiddle works fine on a PC, but the same fiddle on a mobile browser doesn't work.

As you will see, it just flips the "front" 180 degrees but never shows the "back"

any idea what I'm doing wrong?

or does anyone know a better way to use a "flipper" animation that works on mobile devices? I just want a basic "click this and it flips" animation.

EDIT: I'm sorry, I should have added more information: It turns out it does work on Android Chrome and Firefox, but where I am seeing it not work is iOS Chrome (56.0.2924.79) and iOS Safari (10.1.1 iOS) and iOS FireFox (6.1)

Obviously this is something I'm missing with a -webkit flag in CSS or something? The link in the comments that show what's its compatible with suggests it should be working with these browsers, so leads me to believe its my code. Sorry again.

Answer 1

it was:

-webkit-backface-visibility: hidden;

that I needed to add.

Thank you guys, your comments helped me to find this answer. I appreciate it.