iPhone Backside transform not shown properly

[mxklb]

As seen on iPhones. The fore-/background flipping is not working. Actually the iPhone browser shows both, logo and player in some kind of semitransparent overlay. A first googling lead me to this:

http://stackoverflow.com/questions/26416505/mobile-safari-not-showing-css-transform-rotatex-and-rotatey-only-rotatez

This could be our solution as well (tbd). Does Helli has an iPhone which shows this bug? Actually I don't have a device where this misbehaviour pops up, so it would be nice if you could reproduce this issue on her phone. If so it would also be nice too, if you could give it a try? Ok, yes/no?

[mxklb]

In a first shot we should generalize it to get more browsers to support the css transform. Actually it's not optimized for some browsers especially. There shall be all needed transforms:

-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);

[mxklb]

I directly integrated it into my gh-pages branch. Please first of all check the result out on an iPhone. Maybe this already did the trick (we'll c). On the other side, this could although be related to #5 issue. Maybe the button click issue on the backside (player) was not working properly because of an invalid or wrong transform setup.

[mxklb]

So I quickly tested it moving the onclick from the turnaround container back to the button but chrome on ubuntu still does not catch the onclick event in hovered state. Conclusion:

This rotation generalization has nothing to do with the #5 failed player button clicks or touches!

[mxklb]

I found another post referred to the latest commit of mine (a9f21e0), the transform-style generalization. But I don't really trust this post, I can't find a date when it was written and I think it may be outdated or at least not a recommended source of information:

http://www.quackit.com/css/css3/properties/css_transform-style.cfm

Nevertheless we could give this a quick try as well, using:

transform-style: preserve-3d;  /* W3C */
-webkit-style: preserve-3d; /* Safari & Chrome */
-moz-style: preserve-3d; /* Firefox */
-ms-style: preserve-3d; /* Internet Explorer */
-o-style: preserve-3d; /* Opera */

instead of my actual implementation:

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;

while I still think the implementation from that post looks strange. I can't test it so I actually leave this test out. If you're able to test it and the transform generalizations (a9f21e0) and (845f49b) still don't fix this issue, please try out this strange post solution .. thank you

[mxklb]

At least for newer iPhones this seems to be fixed within PR #24 changes ..