Jump to content
Search Community

SVG Rotation Issue only on Safari and IOS8

AML Group test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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  -



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


Any help would be greatly appreciated. 



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

Link to comment
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


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 comment
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.



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 comment
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 comment
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.
  • Create New...