Hey guys, I’ve noticed a super weird issue with the 3D css transformations on iOS devices (in any browser) and in Safari on MacOSX (chrome on MacOSx works fine.
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 issue 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?!
Just tested on Safari. Seems like your Swirlberry works fine when you press but Grapermint disappears when you do the same to it. Same with Twisterine and Blurberry.
Hey @mbrannon47 Thanks for checking it out! I really appreciate the help. Was that Safari on MacOSX, iOS or Windows? Did it function correctly in other browsers (like chrome) under that platform?
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.
