Jump to content
GreenSock

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

Z-Index Automatically Set When Using The CSS Plugin

Recommended Posts

I've been having an issue using TweenMax and setting the css properties of an element. It seems to be automatically picking out a z-index and applying it to the style of the element. I'm assuming this is something that was added as a quick fix for performance or css3 animation flickering as backface-visibility is also added without me requesting it (which is a whole different issue and really bogs down performance on iOS Safari). 

 

The code is:

TweenMax.set(element, {css:{y:0}});

 

This ends up being:

 

<div class="header" style="z-index: 0; -webkit-backface-visibility: hidden; -webkit-transform: translate(0px, 0px); ">...</div>
 
The problem is the z-index on the style attribute is overriding the z-index i have applied in my stylesheet. And as it sets the value to 0, my element just disappears. I can manually set the z-index in the tween and fix that issue but i shouldn't have to worry about updating that value anywhere other than my css. 
 
Is there something that I'm applying improperly? Maybe another parameter that will remove this default behavior (tried autoRound: false but didn't work)? If this is the intended behavior might i suggest getting the element's z-index and applying that value to the style attribute so to not override it to 0.
 
Thank you for this awesome platform. I've been using greensock for such a long time and so glad it made it to JS. 
Link to post
Share on other sites

Sorry to hear about the trouble - which version of TweenMax are you using? It sounds like you might be using a pretty old one. More recent versions should be getting the zIndex from the getComputedStyle(). And yes, the reason the zIndex gets added is to work around bugs in iOS Safari that can cause things to disappear or render incorrectly. I'd be very curious to see an example file if you still have the problem after updating to the latest version. 

Link to post
Share on other sites

And are you sure that the z-index is incorrect? In other words, are you positive that one of your classes applies a non-zero z-index? I'd definitely like to see a stripped-down sample file if you don't mind. No need to give us your production files - just something really basic.

Link to post
Share on other sites

It looks like .header is applying z-index:50, but inline style has z-index:0

Link to post
Share on other sites

That inline style is coming from TweenMax. Created an isolated example and can't reproduce the z-index application so will try to figure out what condition the z-index is still being applied

Link to post
Share on other sites

Ah yes, silly me - I didn't see the dev tools readout on the right. Yeah, I'm kinda confused because I double-checked the code in CSSPlugin/TweenMax and it's getting the computed style so I'm not quite sure where the issue is. Once you get an example file together, I'd love to see it. I'm sure we can pin it down once we see a sample. 

Link to post
Share on other sites

I had the same problem, I found out it this effect appears only with divs with a 'position:relative' property. When set to 'position:absolute' there is no problem...

Link to post
Share on other sites

Hi,

 

I haven't been able to reproduce the subject of this post, please check that you're using an updated version of the engine (current version is 1.9.3, cdn links are updated too).

 

Anyway I've created a simple example that sets the z-index property of an element, then tweens top, left and z-index property of the element and the z-index doesn't change beyond the tween var. Something like this:

CSS

#div1{
	position:relative;
	width:150px;
	height:150px;
	background:#00f;
	margin-top:10px;
}

JS

$(document).ready(function(){

var div1 = $("div#div1"),
	log1 = $("div#log1"),
	log2 = $("div#log2"),
	log3 = $("div#log3"),
	btn1 = $("button#btn1"),
	tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360, zIndex:20, paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});

TweenMax.set(div1, {zIndex:50})

function tn1Start()
{
	log1.children().html(div1.css('z-index'));
}

function tn1Update()
{
	log2.children().html(div1.css('z-index'));
}

function tn1Complete()
{
	log3.children().html(div1.css('z-index'));
}

btn1.click(function()
{
	log1.children().html('');
	log2.children().html('');
	log3.children().html('');
	tn1.play(0);
});

});

If you remove the set tween, add the z-index value in the inline style and remove the zIndex in the tween, the element's z-index doesn't change neither:

CSS

#div1{
	position:relative;
	width:150px;
	height:150px;
	background:#00f;
	margin-top:10px;
	z-index:50;
}
tn1 = new TweenMax.to(div1, 2, {top:200, left:300, rotation:360,/* zIndex:20,*/ paused:true, onStart:tn1Start, onUpdate:tn1Update, onComplete:tn1Complete});

//TweenMax.set(div1, {zIndex:50})

Even if you change the position to absolute there's no difference.

 

You can see it working here, and you can make the changes in there to see the behavior:

See the Pen whDdj by rhernando (@rhernando) on CodePen

 

Also it would be great if you could set up a working example of your problem in order to check what could be causing the problem.

 

Hope this helps,

Cheers,

Rodrigo.

Link to post
Share on other sites

I have a similar issue

 

In some occasion, mostly in Safari, z-index set to 0 from TweenMax.

 

A working sample can be seem at:

http://demo.ki-cl.com

steps to reproduce:

1) click work,

2) click logo on the top left to home,

3) click work again and z-index set to 0 for body>header, body>main or anything that I just tweened.
 
function which I call tweenmax:
$.fn.tween=function(o){
  var c=$.extend({time:1,ease:Power2.easeInOut},o),t=$(this),time=c.time;
  delete c.time;
  TweenMax.to(t,time,c);
  return t;
}
 
so I will do e.g.:
$('div#content').tween({autoAlpha:0,textIndent:100,time:3});
 
Link to post
Share on other sites

When you animate a transform in Safari, GSAP automatically checks to see if a z-index is set on the element(s) and if not, it sets it to 0 in order to work around a browser bug that causes things to render incorrectly otherwise. Again, that's definitely a browser bug, not GSAP. We're actually helping to protect you with that z-index thing. 

 

Is this causing a problem for you somehow? 

Link to post
Share on other sites

I was using a version from 2012 but after updating i am still running into the issue.

 

http://willistherage.com/files/tweenmax01.png - Applied Style

http://willistherage.com/files/tweenmax02.png - Version of TweenMax

 

I can provide a link if needed.

 

Hi,

I see you're using TweenMax version 1.8.2 or 1.9.1, the current version is 1.9.7 and first I would upgrade to the latest version at http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js . Did you tried to use clearProps ( clearProps - A comma-delimited list of property names that you want to clear from the element's "style" property when the tween completes (or use "all" to clear all properties). This can be useful if, for example, you have a class (or some other selector) that should apply certain styles to an element when the tween is over that would otherwise get overridden by the element.style-specific data that was applied during the tween. Typically you do not need to include vendor prefixes. ) ? 

  • Like 1
Link to post
Share on other sites

I just wanted to say I was having the same issue and found a solution.  Please note that I am building a large ajax-driven app which loads all resources with an AMD loader.  I am not sure if this will solve anybody else's problems, but here's ahhh solution.

 

In my situation, TweenMax was getting a null zIndex for an item which definitely had a z-index specified in my styles.  However, I am using LESS during development, and I am using the in-browser LESS engine which parses the LESS files in the browser and writes the compiled CSS to a style tag.  I verified that the LESS engine was done compiling before triggering TweenMax, however Safari still returned a null zIndex.  It turns out that Safari needed an extra CPU cycle so the browser could finish calculating the dynamically injected styles.  A zero timeout worked nicely.  The following is my modified p._onInitTween method (near line 3700 of TweenMax.js):

 

if (_reqSafariFix) if (style.zIndex === "") {
  setTimeout(function() {
    _cs = _getComputedStyle(target, "");
    v = _getStyle(target, "zIndex", _cs);
    if (v === "auto" || v === "") {
      //corrects a bug in [non-Android] Safari that prevents it from repainting elements in their new positions if they don't have a zIndex set. We also can't just apply this inside _parseTransform() because anything that's moved in any way (like using "left" or "top" instead of transforms like "x" and "y") can be affected, so it is best to ensure that anything that's tweening has a z-index. Setting "WebkitPerspective" to a non-zero value worked too except that on iOS Safari things would flicker randomly. Plus zIndex is less memory-intensive.
      style.zIndex = 0;
    }
  }, 0);
}
Link to post
Share on other sites

Wouldn't it be better to just add your setTimeout() at the very beginning (in your own code) so that you don't start tweening until it has elapsed? With your solution above, the down sides are:

  1. You're creating an extra function and a setTimout() EVERY time you tween something that doesn't have a zIndex. That could be pretty costly performance-wise. 
  2. Every time you update your TweenMax file, you'll have to add your change :(

See what I mean?

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.

×