http://horgenhonning.net/sharing/flipcard/index.html
http://horgenhonning.net/sharing/flipcard.rsd

I made this thing and it works fine on PCs, but there is a wee problem on my iPhone. Tapping on the front side of the card works, but to get back I've had to first tap once on the card, then once outside the card. I don't know how this is on Android devices. Could some of you please test it? And if someone has a solution how to make it work better on mobile devices, I'll be all ears!

Hi Inger. On my Samsung it is the same as you describe on iPhone unfortunately.

Interestingly if you swipe either left then right or right then left it works perfectly on Android. Very cool Inger.

That's interesting, Phil. I may have to write some instructions into the file, but I'll wait a bit and see if someone can come up with a solution also for 'iStuff'.

I would change the hover to a click action by adding a button like "Learn more" on the front and then also a button like "No thanks" on the back. You could still have your link button on the back to take them where you want.

The problem lies in that there is no total cross browser coverage for hover on touchscreens. A click function is much more universal.

Also the example does not work on IE10 + IE11. (3d transforms etc)

I have a example that uses both hover and click but its somewhat buggy. It also has IE10 support. (It also is done in a previous version of Bootstrap - I have a really hard time with the new positioning of head and footer in the pages update. Doing custom css and js is a real pain in the new design window !)

I also would look at a plugin called flip.js https://nnattawat.github.io/flip/

I think it has taken care of the hurdles required, except IE10+11 but even there you could target those by decreasing the front and back transition time to zero.

Hi, thanks again, Twinstream! I went to jsfiddle and created the one they had there and used your script with it. It's working fine on my iPhone now, hopefully also on Androids. (URL is the same as in my first post in this thread.)

Perfect on Android with click on and click off. Missing photo now and second card is not centre aligned but I assume this is just a style thing. Regards

I see the card and the centered back side both on my pc and iPhone. could it be that you need to clear your mobile cache? Or something?

I just asked a neighbour who has a Huawei Android tablet, and by using Chrome he got it showing correctly.

Phil and anyone else with Android devices,
I borrowed that Huawei thingie from my neighbour and have seen, that if I use the default web browser, I get the error you mention. That is, I get the image, but the card is pushed off to the right.
I have now tried every possible tweak to fix this, but so far I have not been able to. I have changed the position absolute around to different containers, changed the top and left distance, put a wrapper container around the card with exactly the same width as the card itself, even narrowed the body to that same width, - to no avail. And I don't find anything in the script either that is pushing the card out to the right.
If someone has some ideas that I haven't thought of, you are welcome to have a go. The 'original' is at the URL mentioned in the first post here, the tweaked copy is here:
http://horgenhonning.net/sharing/flip2/
http://horgenhonning.net/sharing/flip2.rsd

Some years ago I red some comparison between Apple and Android gadgets when creating websites for them. The conclusion was actually not very favourable for the Android browser, because every company who is using it in their devices seems to be allowed to change bits and pieces, so that designing for them can be a real nightmare. It seems that is still the case.