Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AML Group

SVG Rotation Issue only on Safari and IOS8

Recommended Posts

Hi wonder if someone could help me.


 


I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8.


The issue is that on safari, when it rotates it seems to be missing one half of the circle.


 


Have attached the PEN  -


Pen: 


Page: 

See the Pen xGoRzw by sonamtsu (@sonamtsu) on CodePen


  •  

Any help would be greatly appreciated. 


 


Thanks


See the Pen xGoRzw by sonamtsu (@sonamtsu) on CodePen

Link to post
Share on other sites

Cool animation.

 

I tested on iPhone6 Safari with iOS 8.1.3. I did not see any rendering issues with the circle.

 

I would suggest editing the pen so it uses the latest version of TweenMax

//cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

If you still have the same issue, please reduce the demo to the bare minimum amount of code to recreate the issue. I suspect it only needs to be 1 or 2 tweens and not multiple timelines. Just makes it much easier for us to focus on the issue. Thanks!

 

If you could grab a screenshot (hold down the Home button and then press the power button) of the glitch that would also help us verify whether or not we are seeing the same thing as you. I saw a full red circle at various scales throughout the animation on my device.

 

Can anyone else replicate this?

  • Like 2
Link to post
Share on other sites

Thank you all for your help and chipping in . 

 

Glad you liked the animation.

Link to post
Share on other sites

I am also trying to put the white circle behind the red circle when it pulsates, but cant to seem to do that . 

 

Tried z index but no luck

 

Is it because its an SVG ?

 

Codepen : 

See the Pen bdPrdd by sonamtsu (@sonamtsu) on CodePen

Link to post
Share on other sites

you just need to change circle position in your svg markup .

  • Like 1
Link to post
Share on other sites

To get the white circle behind the red circle without changing the html markup, and if your having a z-index issue. You could set the opacity on the white circle to opacity:0.99 so it moves on its own layer. Moving it below an opacity value of 1. Basically your giving the element a new stacking context without changing the z-index.

 

with CSS:
 

#pathR {
  opacity: 0.99;
}


with GSAP JS:
 

TweenLite.set("#pathR", {opacity:0.99});


So just something to keep in mind when changing the z-index doesn't work.

 

Resource:

stacking context: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

W3C transparency: http://www.w3.org/TR/css3-color/#transparency

 

I hope this helps! :)

  • Like 4
Link to post
Share on other sites

Interesting trick Jonathan! Never seen that before.

 

Whenever I need to change the z-order of SVG elements, I just append them. It's basically doing the same thing as the z-index in CSS.

 

See the Pen YXoEQe by osublake (@osublake) on CodePen

  • Like 3
Link to post
Share on other sites

Really cleaver Blake!

 

Here are some of the following that can trigger a new stacking context:

  • the root element (HTML),
  • positioned (absolutely or relatively) with a z-index value other than "auto",
  • a flex item with a z-index value other than "auto",that is the parent element display: flex|inline-flex,
  • elements with an opacity value less than 1. (See the specification for opacity),
  • elements with a transform value other than "none",
  • elements with a mix-blend-mode value other than "normal",
  • elements with a filter value other than "none",
  • elements with isolation set to "isolate",
  • on mobile WebKit and Chrome 22+, position: fixed always creates a new stacking context, even when z-index is "auto" (See this post)
  • specifying any attribute above in will-change even you don't write themselves directly (See this post)
  • elements with -webkit-overflow-scrolling set to "touch"

:)

  • Like 1
Link to post
Share on other sites

Jonathan, you're one smart cookie!

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

×