Jump to content
Search Community

Safari Stack Changes When Animation Starts

swampthang test
Moderator Tag

Recommended Posts

First, this is only happening in Safari as far as I can tell. This is a simple fade-in for (please don't curse me) an image inside a foreignObject and a nested SVG (ducking a right hook).

 

I discovered that, as soon as the animation begins and the style attribute is added to the image, the browser redraws and sets the image (which is first in the stacking order) on top of the SVG. 

 

I set up 3 buttons. The timeline starts out paused, so clicking the play button shows you the stacking switcheroo. REWIND/STOP is obvious. The 3rd button pauses the timeline and removes the style attribute from the img. If you do that towards the end of the timeline, you can see the gray circle (the svg) come back to the top of the stack as it should.

 

Does anyone know a way around this in Safari?

 

See the Pen oNXPRVZ?editors=1010 by swampthang (@swampthang) on CodePen

Link to comment
Share on other sites

Yeah, I'm not sure either. I think you're asking for trouble by using <foreignObject> and nested <svg> elements. Browsers seem to balk at those. I suspect you knew that based on your "ducking a right hook" comment :)

 

If you need any GSAP-specific help, we're happy to chime in.

Link to comment
Share on other sites

Ok, for anyone else who has this issue, I may have learned my lesson with foreignObjects. I can't believe I didn't know about being able to use an <image/> tag in a nested SVG with xlink:href  but here's the solution. It seems to work in all browsers except Internet Exploder but foreignObjects don't work in it anyway.

See the Pen zYGmYzo by swampthang (@swampthang) on CodePen

 

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