Jump to content
GreenSock

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

Safari mobile bug?

Recommended Posts

Hey code mates!

I wanted to ask for help in something that i´ve triying to solve all weekend.

If your run my pen on Safari mobile you will notice that 2 faces are not respecting the translate3D property given, in Safari mobile they are not in the right place. In every other browser they are running great.

Is there something i´m missing here? Do i have to add something to make Safari recognize the actual translate3D?

Thanks! And btw i´m making and event invitation with the cube + gsap, as soon as i get this Safari mobile bug i´ll finish the syling and will make it live. I´ll share it here.
 

post-41559-0-71344500-1462805462_thumb.png

See the Pen dMwZJM?editors=1100 by caemostajo (@caemostajo) on CodePen

Link to post
Share on other sites

Hello caemostajo, and Welcome to the GreenSock Forum!

 

I'm not at my computer right now.. I don't think this is a Safari bug, since I see no CSS perspective being used on your 3D cube?
 
When trying to animate a 3D cube you need to use the CSS property perspective. You need to have perspective ( perspective ) either on the direct parent of the element your using CSS transforms on. Or you need to use transformPerspective ( transform: perspective() ) on the element itself.
 
Sometimes you also need to place the CSS property transform-style:preserve-3d; on the faces your animating with CSS transforms as well in some browsers.

 

But this looks like Safari is crapping up because you are not using perspective, which is required for 3D transforms.
 
Also i noticed your mixing GSAP with jQuery css() method. You shouldn't mix them because then you are changing CSS properties outside of GSAP..
 
So instead of using jQuery css() method, you should use the GSAP set() method instead.
 
For example.. this using jQuery css() :

self.actors.left.back.css(
            'background-image',
            'url(http://www.biglittlegeek.com/wp-content/uploads/2015/05/android-lollipop-hd-wallpapers-6-150x150.png)'
);

Would become this using GSAP set():

TweenMax.set(self.actors.left.back,(
    'background-image',
    'url(http://www.biglittlegeek.com/wp-content/uploads/2015/05/android-lollipop-hd-wallpapers-6-150x150.png)'
});

Resources:
GSAP set(): http://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/

CSS perspective: https://developer.mozilla.org/en-US/docs/Web/CSS/perspective

 

:)

  • Like 1
Link to post
Share on other sites

i´ve tried adding perspective to the parent, transform-style and transform-perspective with no luck. The problem still persists.

I´ve noticed that the transform-origin of ".big-flipper" is causing the bug, it is causing the misplacement of the 2 faces (front & right) only in safari mobile, i dont know why is happening this and how to fix it.

Link to post
Share on other sites

Here is an example of a cross browser 3D Cube. Example of cross browser 3D cube (Safari, Chrome, Firefox, IE11, MS Edge)

 

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

 

In order for your above example to work cross browser and in Safari, you have to use a different type of HTML markup. As well as needing specific CSS properties like perspective or transform perspective, transform-style and transform-origin.

 

So you need to add perspective and change your HTML markup if you want your CSS 3D cube to work cross browser!

 

Also make sure like i advised above not  to mix GSAP with jQuery css() method, so this way you are not changing CSS values outside of GSAP.

 

if you still feel this is a Safari browser bug, then feel free to submit a bug report to the Apple Developer Bug Reporting website:

 

https://developer.apple.com/bug-reporting/

 

:)

 

:)

  • Like 1
Link to post
Share on other sites

From what I can tell, this is unrelated to GSAP - I just removed all the JS code (so GSAP wasn't a factor) and the positioning was off in Safari as you described. It's some issue in your CSS. We try very hard to stay focused on GSAP-specific questions in these forums (we just don't have the resources to provide free consulting for other issues) but hopefully Jonathan's advice proves helpful. He's a gentleman and a scholar ;)

  • Like 3
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.

×