Crazy issues in Safari. No problems in Chrome

[Liam@II]

 

 

this works just as i want in Chrome but none of the rotations happen in Safari Version 9.1. and the scaling of the sprite sheet results in half of it disappearing (alternating between left and right hand side)

 

Can anyone help please

See the Pen vGWLLr by Liamii (@Liamii) on CodePen

[GreenSock]

Safari treats stacking order in a really funky way (unlike all the other browsers) because it tries to composite them all in a more "true" 3D context regardless of z-index. So think of it like you've got 2 pieces of paper on top of each other, smashed together, and then you rotate the bottom one slightly in 3D (toward you) - it will cut the other piece of paper (on top) in half. One could argue that's more accurate rendering-wise, but it's just confusing for most people. In your case, #coin and #shadow are both getting cut in half (sorta). 

 

A solution would be to move them toward the camera so that the rotating "paper" (elements) underneath don't interfere (or push those backward on the z plane). Like:

TweenMax.set("#coin, #shadow", {z:100});

By the way, you can pass an array or a selector text that grabs multiple elements into any tween or set() command to simplify your code:

//OLD (long)
TweenMax.set(".a", {visibility:"visible"});
TweenMax.set(".b", {visibility:"visible"});
TweenMax.set(".c", {visibility:"visible"});
TweenMax.set(".d", {visibility:"visible"});


//NEW (short)
TweenMax.et(".a, .b, .c, .d", {visibility:"visible"});

[Liam@II]

 

Safari treats stacking order in a really funky way (unlike all the other browsers) because it tries to composite them all in a more "true" 3D context regardless of z-index. So think of it like you've got 2 pieces of paper on top of each other, smashed together, and then you rotate the bottom one slightly in 3D (toward you) - it will cut the other piece of paper (on top) in half. One could argue that's more accurate rendering-wise, but it's just confusing for most people. In your case, #coin and #shadow are both getting cut in half (sorta). 

 

A solution would be to move them toward the camera so that the rotating "paper" (elements) underneath don't interfere (or push those backward on the z plane). Like:

TweenMax.set("#coin, #shadow", {z:100});

By the way, you can pass an array or a selector text that grabs multiple elements into any tween or set() command to simplify your code:

//OLD (long)
TweenMax.set(".a", {visibility:"visible"});
TweenMax.set(".b", {visibility:"visible"});
TweenMax.set(".c", {visibility:"visible"});
TweenMax.set(".d", {visibility:"visible"});


//NEW (short)
TweenMax.et(".a, .b, .c, .d", {visibility:"visible"});

 

 

Awesome response!

[Liam@II]

Hi,

 

one more issue im seeing is when scaling SVG paths. top image is Chrome, bottom is Safari (on Desktop). im seeing a shift in the x position for no apparent reason. i cant send this to client.

 

all content is SVG but the only element im scaling is the infinity logo, im also animating the x and y using relative amounts (+=200)

 

heres the codepen link. the id in question is called #outline

 

See the Pen RaQqpP by Liamii (@Liamii) on CodePen

 

 

has anyone else seen this issue? 

would anyone have a possible solution?

[Jonathan]

Hello Liam@II, This shift might be related to that new Chrome 49 scale bug. That topic can be found here:

 

http://greensock.com/forums/topic/13875-chrome-49-janky-gsap/page-2#entry59138

 

The Chrome Dev Team is currently trying to fix this scale bug. It is related to other Chrome bugs that cause jitter or blurry anti-aliasing.

 

https://bugs.chromium.org/p/chromium/issues/detail?id=596382&can=2&start=0&num=100&q=chrome%2049&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified&groupby=&sort=

 

Hope this helps

[Oliver16Years]

Hi,

 

one more issue im seeing is when scaling SVG paths. top image is Chrome, bottom is Safari (on Desktop). im seeing a shift in the x position for no apparent reason. i cant send this to client.

 

all content is SVG but the only element im scaling is the infinity logo, im also animating the x and y using relative amounts (+=200)

 

heres the codepen link. the id in question is called #outline

 

See the Pen RaQqpP by Liamii (@Liamii) on CodePen

 

has anyone else seen this issue? 

would anyone have a possible solution?

This is why im using only optimized .pngs. We are in the middle of an HTML wild west. But despite that, I still need to insert browser depnendent code in my banners. One update here, one update there and my carefully reseached code is not able to evade the pixel snapping or scale caching bugs anymore.

[GreenSock]

This actually appears to be a funky browser issue related to the specific <path> you are using and the way the anchors are arranged. Just look at what getBBox() returns on that element (#outline). Very different values between Chrome and Safari! That really shouldn't be the case. I believe the two browsers just have a different way they're calculating the bounding box on bezier paths. A solution would be to add 2 more points to the shape so that you don't have big curves (and no anchors) on the two ends where the browsers are trying to figure out the bounding box. For example, try swapping this in for the path data: 

"M183,128.6c-13.4-17.3-52.4-72-103.6-74.6c-35.6-1.8-55.3,36.1-55.7,74.2 C23.4,164.9,41,201.6,79.5,203c90.3-7.3,104.2-116.7,163.8-117.2c21.1,0.8,31.3,22.2,31.1,43.5c-0.1,21.3-10.8,42.5-31.4,42.5 C216.4,171.8,196.5,145.9,183,128.6z"

Again, the more points (anchors) you add to your shape, the more consistency you'll get because it's easier for the browser to determine the bounding box using their different algorithms.