Jump to content

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

Safari Stack Changes When Animation Starts

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

Share this post

Link to post
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.

Share this post

Link to post
Share on other sites

I would only direct you to my thought in your other thread here:


  • Like 1
  • Haha 4

Share this post

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.