Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PeterB73

3D display issues with Firefox OSX & PC plus IE10

Recommended Posts

Hi, I’ve spent the last day building a working rubix cube demo using TweenMax to position and animate the objects accordingly.

 

Draggable is being used to rotate the cube X/Y and throwProps is used too.

 

Firefox  is displaying some very odd, back-face type display issues that I can't seem to resolve, can anybody suggest a work-around or fix to correct this problem?

 

IE10 is simply flattening the whole object onto a 2D plane and not allowing any z-depth.

 

The demo will auto rotate 20 times before allowing user interaction by "swiping" a side to rotate it, or dragging the background to rotate in the cube in 3D space.

 

Any help would be gratefully appreciated.

 

View the demo here: http://www.rogueinteractive.net/rogueiOS/rubix.html

 

Pete

 

 

 

 

Link to post
Share on other sites

I don't have OSX so I can't help you there, but in regards to IE10: it doesn't support transform-style:preserve-3d so it's going to flatten out like you are seeing. It's noted in the CSSPlugin documentation, and Microsoft suggests adding the parent transforms to each child's transform... sounds fun =D

 

It looks awesome in Chrome at least. Great demo!

  • Like 1
Link to post
Share on other sites

Yep I second Jamie's great advice! The only way around transform-style preserve-3d workaround for IE10-IE11 you will need to animate each face separately per the Microsoft transform docs about transform-style:

 

http://msdn.microsoft.com/en-us/library/ie/hh673529%28v=vs.85%29.aspx

 

"At this time, Internet Explorer 10 does not support the preserve-3d keyword. You can work around this by manually applying the parent element's transform to each of the child elements in addition to the child element's normal transform."

 

So there is a workaround..  for modern browsers that support transform-style: preserve-3d, you instead apply the CSS perspective function to the cubes parent. But for IE10 that does not support transform-style: preserve-3d.. you have to apply the perspective as a property inside the transform css function.

 

I made an example of a 3d cube using CSS animation and transform perspective, that does work in IE10-IE11 (test this below link in IE10-IE11):

 

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

So in your case you would have to apply the transforms and transform perspective (GSAP equivalent is: transformPerspective) on each face separately in order to achieve a 3d cube in IE10-IE11.

 

This uses GSAP to animate 3d cube on X-axis that works in IE10-IE11:

 

See the Pen aoefG by jonathan (@jonathan) on CodePen

 

Also for Firefox to fix the backface:

 

add CSS backface-visibility:hidden to your .cube span :

.cube span {
   -ms-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

or set with GSAP for cross browser so you don't have to worry about prefix

TweenMax.set($(".cube span"),{"backfaceVisibility":"hidden"})

Works good in Chrome like Jamie said...

 

Hope this helps? :)

  • Like 1
Link to post
Share on other sites

Thanks Jamie,

 

I must have missed that when researching the problem.  It will take some re-engineering to apply the parent transforms to each child individually alas, maybe I will skip IE10 for now.

 

The Firefox issue is both Mac and PC, both browsers are not rendering it correctly... if you have any words of wisdom here, also greatly appreciated.

 

Thanks for looking anyway, at least it works ok in Chrome and Safari for now!

Link to post
Share on other sites

Hi Jonathan,

 

I tried the Firefox fixes you suggested prior to the post, as well as implementing again in case I missed something previously, but alas the problem is still there.

 

I will re-write the code for IE10/11 as you described to hopefully get this working in IE also.

 

Cheers for you help!

Link to post
Share on other sites

Hmmm.. weird.. in the browser inspector, in FireBug, in Firefox.. when I add backface-visibility: hidden to .cube span, I see the cube take its solid state and looks like it does in Chrome.

 

What Firefox version you on?

Are you on a Mac or PC?

 

Thanks!

Link to post
Share on other sites

Im on OSX using FF v30.  I‘ve added it in the inspector manually also but it changes nothing 

 

.cube span {-moz-backface-visibility:hidden !important; backface-visibility:hidden !important;}

 

Cheers

  • Like 1
Link to post
Share on other sites

I have nothing to add in addition to the great advice and suggestions so far :( 

I do find it necessary though to commend you on your work thus far. That is a very impressive demo you have there. Great Job!

 

Please let us know when its all wrapped up, would love to see it and share with folks.

Link to post
Share on other sites

I have nothing to add in addition to the great advice and suggestions so far :(

I do find it necessary though to commend you on your work thus far. That is a very impressive demo you have there. Great Job!

 

Please let us know when its all wrapped up, would love to see it and share with folks.

 

Thank you very much Carl, most appreciated.

 

Take a look at a few other things I‘ve recently done utilising the Greensock platform

 

On your desktop : http://www.rogueinteractive.net/rogueOS

 

On your mobile : http://www.rogueinteractive.net/rogueiOS   (iPhone best)

 

and another demo we made testing the draggable and throwProps plugins:

 

http://www.rogueinteractive.net/skysports   (on your mobile - iPhone best again)

 

any feedback, suggestions etc appreciated.

 

Pete

  • Like 1
Link to post
Share on other sites

Yes i agree with Carl, it is a very cool and impressive use of CSS transforms using GSAP for a complex Rubix Cube.. Good Job! :D

  • Like 1
Link to post
Share on other sites

Nice work, Peter. First time I've seen a portfolio converted into both a desktop and mobile OS – very clever! Really enjoyed the skysports thing. Very nice animation effects.

  • Like 1
Link to post
Share on other sites

Hi,

 

I’ve finished the rubiks cube now and added some instructions, counter and a "solver" button that appears after the user has done >10 moves, so the cube auto solves itself.

 

I didn't manage to get it fixed for IE, I just couldn't seem to get it working correctly.  The FF 3D back-face display issues is also a problem, and I‘ve found another bug in Firefox (v30 Mac and PC)  that doesn't seem to allow 3D content to be loaded via an iframe whose properties also contain a 3D transform setting - anyone come across a similar problem??

 

The cube can be view on its own as before: http://www.rogueinteractive.net/rogueiOS/rubix.html

 

and the Cube embedded into our site’s OS can be viewed here and access from bottom nav icon: http://www.rogueinteractive.net/rogueOS/

 

I’m a bit rubbish at Rubik’s cubes, thats why I needed to create a solver!

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×