Jump to content

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

Stacking Context Issue

Recommended Posts

Let me start by saying that I know this is a Chrome/Chromium issue. The CodePen works as expected in Firefox.


Also, I know Blake has warned about using foreignObjects but I'm stuck with using them because, in my app, I have to use foreignObjects to render image layers to canvas creating a stack of PNG sequences inside a master SVG. I'm also forced to be able to support Chrome/Chromium.


Here's the deal. I've run into a stacking context issue which I thought I had resolved before by doing something subtle to the SVG container using TweenMax to force the browser to do a redraw. Here, though, the issue is a little different. 


I have to allow my users to shift the order of each foreignObject which I accomplish using a javascript insertBefore. But, as you can see in the CodePen, if you shift the animated element to the back of the stack and then re-run the animation the browser is rendering it on TOP of the stack for as long as the animation is running. Then, once the animation is completed, the browser renders the element to the back of the stack where it belongs.


Forcing a redraw like I've done in the past is not working. Any help would be greatly appreciated.

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

Link to comment
Share on other sites

It looks like Chrome has issues with the way it's promoting 3D-accelerated elements to layers (for the GPU). Try setting:

CSSPlugin.defaultForce3D = false;


That'll force it to render anything it can to 2D transforms. Of course the down side is that you lose GPU acceleration, but I'm honestly not sure it matters if you're doing stuff inside an SVG. 


Oh, and if you don't want to change the default, you could just set force3D:false on each tween (or once per-element, because that setting sticks on a per-element basis). 

  • Like 2
Link to comment
Share on other sites

Ahhh, ok. Yea, that actually did fix it. The only thing I'm concerned about though, is there are some pretty involved animations and can potentially be a bunch of them stacked together. Was wondering if there's a way to limit the scope of that. For example, we have SVG elements being drawn in on one layer that's not in a foreignObject, of course, but those show up in the stacking order.


Can setting defaultForce3D: false on an element be changed to true later? In this CodePen, it seems to work to set it to false on each element right after restacking them and then setting it to true in the animation.


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


What's crazy is older versions of Chromium didn't get confused like this. 


Edited by swampthang
Added a CodePen
Link to comment
Share on other sites

Sure, like I said, you can change force3D on a per-element basis. The CSSPlugin.defaultForce3D just sets the default, but you can override that whenever you want in any tween. 

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.