Streaming live at 10am (PST)

3D transformations broken on ONLY iOS devices in ANY browser


#1

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?!

Thanks!
Nicholas
Peppermint Cloudz

@thesergie
@PixelGeek
@cyberdave
@thewonglv
You guys are the best!


Here is my public share link: LINK
Here is my public webpage: LINK


Peppermint Cloudz e-juice site. Makes use of Fullpage.js and 3D transformations
Text Cut on 3D Rotation
#2

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.


#3

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?


#4

No problem. That was for Safari on OS X. Works fine on Chrome OS X.


#5

@mbrannon47 Man, that's so weird...I just did a comparison in the code on both of those sections and there isnt ANY relavant difference...wth... 0.o


#6

UPDATE

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. :confused:

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.

What the hell?? :joy::joy::joy::joy::joy::joy:


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.