Help on iOS with GSAP transforms

[retropunk]

Hey guys, I refactored a version of Chris Gannon's Cube Dial demo here

 

So far its working fantastic...Desktop (Chrome, Safari, FF) and Android (Chrome)

 

The problem is when I start to test on iOS only...

When the cubes start to rotate the get cutoff

 

I'm sure there is something I missed...hopefully a fresh pair of eyes can help me find the missing piece.

 

Thanks!

- Patrick

 

 

See the Pen ?editors=001 by SnapToPixels (@SnapToPixels) on CodePen

[retropunk]

So I figured out the mistake

 

The culprit seems to be 2 things.

The first one I should know better, I forgot to add the CSS position

 

Something with the z property and possibly the z-index...hmm not sure but -100 seemed unnecessary and removing the z property didn't do anything else but seem to fix the issue.

 

Also, is it best practice to keep the values in quotes? Seems like it is.

 

This causes an issue on iOS

TweenMax.set(container, {
  backgroundColor: "#002663",
  width: '300',
  height: '250',
  zIndex: -100,
  z: -400
});

This works great everywhere

TweenMax.set(container, {
  position: 'absolute',
  backgroundColor: "#002663",
  width: '300',
  height: '250',
  zIndex: '-1'
});

I need to make sure I understand this so I will do some more testing and come back with my findings.

5 stars to Chris Gannon for doing what I ALWAYS wanted to do with JS and CSS...no CSS file.

WOOT WOOT!

 

Thanks guys

- Patrick