X-Post from Needs Help, as I’m not sure if this is a bug or my own fault.
Hey guys, I’ve noticed a super weird bug with the 3D css transformations on iOS devices (in any browser) and possibly on MacOSX devices (untested).
Upon entering my site, you’ll notice 3D transformations on the peppermint shaped bottles which, when clicked, flip over 180* to show the backface, another Div. This bug effects all four of the 3D transformations on the page in sections 2-5. The breakdown is as follows:
Le Grandeur Format
-Section (2-5)
–Wrapper Div
—3D Front
----Text block & Image block
—3D Back
----Div with 2 headers, a text block, and another div with an HTML embed
The transformations work perfectly on every device I’ve tested in every browser I’ve tested across multiple devices with big and small screens, with the exception of EVERY iOS device in EVERY browser, which fails miserably, showing nothing at all upon transform interaction and cuts the text off at the top upon flipping back over.
I know this is still super new, but uhhh…what’s going on here?!
Hmm not sure what’s happening. Try to set an initial appearance of Move 0 on the Wrapper Div. So if something has an interaction on hover try to set a 0 transform on the non-hover to see if that does anything. Also depends on the version of OSX safari that supports or doesn’t support 3d transforms.
Also i would add a Cursor: default so it’s more obvious those peppermint candies are clickable.
OK, I almost have it. I set the very top Div in each section with a relative position and a z-index in descending order. It was necessary to set both in every section, even though the top most parent div is NOT the parent transformation target.
HOWEVER! I cannot get more than 3 of 4 transformations to work.
For example: If I set all the sections to relative, and set the z-index for each of the sections the following happens:
All Z-Index the same: Only top (swirlberry) fails.
Z-index in Ascending order: Only top (swirlberry) fails
Z-Index in Descending order: Only bottom (blurberry) fails.
