animating background position buggy x-browser

[Rob 15 Likes (Newbie)]

I've experienced some issues animating background position. As usual everything is perfect in Webkit

I only care about IE9+, FF, Chrome, Safari.

TweenMax.fromTo($('#rain-' + i), 1,
        {css:{'background-position': ""+rainHeight+"px 0px"}},
        {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );

This animates the position of a css linear gradient.

It works on everything except Firefox, Firefox just does nothing.

 

However this.... (with camel cased keys)

TweenMax.fromTo($('#rain-' + i), 1,
        {css:{backgroundPosition: ""+rainHeight+"px 0px"}},
        {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );

...works fine in Firefox, but causes an invalid argument error in IE10 (it's fine in IE9)

SCRIPT87: Invalid argument
TweenMax.min.js line 16, character 20973

For the time being I have implemented the following special case which is grim.

 

    if (document.all && window.atob) {
      // Firefox breaks with 'background-position'
      // IE10 breaks with 'backgroundPosition'
      // bodge to workaround
      TweenMax.fromTo($('#rain-' + i), 1,
        {css:{'background-position': ""+rainHeight+"px 0px"}},
        {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );
    } else {
      TweenMax.fromTo($('#rain-' + i), 1,
        {css:{backgroundPosition: ""+rainHeight+"px 0px"}},
        {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone }
      );
    }

 

Any suggestions? Is this something that can be fixed in TweenMax?

 

 

[Carl 9,066 Likes (Superhero)]

Hi Rob,

 

Thanks for pointing out this issue. Sounds like IE is at it again.

 

Its very strange that your solution worked because behind the scenes CSSPlugin is taking backgroundPosition (camel-cased) and converting it to background-position when the inline styles are generated. You shouldn't have to send a hyphenated string as the property.

 

It would be a great help if you could take this codepen example:

See the Pen fecb4a95e3d47ae44b44c67ef4ae7ee4 by GreenSock (@GreenSock) on CodePen

 

fork it and and add an element with all the pertinent css (gradient code) and js that you are using. 

 

This will help us in testing and coming up with a solution.

 

Thanks

[Rodrigo 2,662 Likes (Superhero)]

Hi Rob and welcome to the forums.

 

First thing would be to ask you which version of the engine you're using, because with the current version (1.9.4) it's working in IE9+, FF20, Chrome 26, Safari 5 and Opera 12.

 

The code that's working for me is the following:

CSS

#div1{
	background: rgb(30,87,153); /* Old browsers */
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
	height:300px;
	width:300px;
	font-size:24px;
	color:#fff;
	font-weight:bold;
}

HTML

<button id="btn1">Tween Background Position</button> <button id="btn2">Reset Background Position</button>

<div id="div1">
Hide Ho Greensockerinos!!
</div>

JS

$(document).ready(function(){

var div1 = $("div#div1"),
	btn1 = $("button#btn1"),
	btn2 = $("button#btn2"),
	tn1 = TweenMax.to(div1, 1, {backgroundPosition:'50px 50px', paused:true});

btn1.click(function()
{
	tn1.play()
});

btn2.click(function()
{
	tn1.reverse();
});

});

You can see it working here:

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

 

Also I've attached a sample file for local testing:

 

 

An advice would be to avoid the progid:DXImageTransform filter for IE6 - IE8, because that breaks up the animation for IE9.
 

Hope this helps,

Cheers,

Rodrigo.

[anthonygreco 54 Likes (Contributor)]

Hey Guys,

 

Been a while since I posted. Man, do I miss using GSAP daily... And now, after a hiatus, I feel like I'm just missing something super obvious like usual, but can't make sense of this strange behavior and wanted to see if others can reproduce. I am animating a background-gradient via background-position similarly as Rodrigo has above. The issue I'm running into is that when the animation starts there's a strange request to the server that returns a 400 Bad Request:

https://fiddle.jshell.net/anthonygreco/9dbakypu/show/linear-gradient(to%20t…200%,%20rgba(255,%200,%200,%200.298039)%2050%,%20rgb(255,%200,%200)%20100% 400 (Bad Request)

You can check the fiddle below and observe the request in the console. This happens for me running OS X Yosemite (10.10.5) in Chrome 49.0.2623.112, Firefox 45.0.2, and Safari 8.0.8 (10600.8.9).

 

Can anyone shed any light onto what may be the issue here? I know everything is still functional, but would still like to know what's causing such odd behavior. If anyone has another method to accomplish the same thing that alleviates the weird request, I'd be ok with that too.

 

Thanks all!

 

JS Fiddle Example

[OSUblake 9,990 Likes (Superhero)]

Background position seems to cause problems under some circumstances. I'm not sure what triggers these problems, but I usually try testing out the kebab/spinal case of the property name to see if that fixes problem. My guess is that it's interfering with a property on JSFiddle's editor.

https://jsfiddle.net/OSUblake/51oksLqy/1/

[anthonygreco 54 Likes (Contributor)]

Ahh... Nice catch Blake. Many thanks.

 

I was assuming that camelCased properties were automatically snake-cased.

[OSUblake 9,990 Likes (Superhero)]

They are, but for some reason backgroundPosition can be unpredictable at times. I can't find the thread where I first noticed this, but animating backgroundPosition vs background-position caused two completely different animations. I haven't tested this outside of an online code editor CodePen, JSfiddle, etc. so it might be just isolated to those cases. You might want to test it out locally and see what happens.

[anthonygreco 54 Likes (Contributor)]

I initially noticed it in a local environment and then created the Fiddle to break it all down, make sure it wasn't scoped to something else in that environment, and so I could have an example to share here. So I feel this isn't restricted to only "online" editors. Do you think this qualifies as something we should report as an issue?

 

¯\_(ツ)_/¯ At the very least, I guess this is documented in a couple places now.

 

Also, if you happen upon the other post again, maybe PM me with a link to it. I'd be interested to see how this broke functionality as well.

[OSUblake 9,990 Likes (Superhero)]

Here's a couple threads I found about using backgroundSize. I think they're still relevant since its the casing that seems to cause some unexpected behavior. Both threads seem to contradict each other.

http://greensock.com/forums/topic/12662-camelcase-browser-compability/

http://greensock.com/forums/topic/12053-handle-size-of-backgroundimage/

 

If you're seeing it locally, then I would say that it would warrant opening up an issue since. Something isn't right here. Or maybe there are certain background properties that must be set first. Either way, I think it should be looked into or at least an explanation given as the to the behavior.

[Jonathan 5,176 Likes (Superhero)]

Most of these issues happen if one of the values is missing when using camelCase. But if using snake-case with background-size, you can get away with having height omitted. Since the omitted value will become auto, and will be calculated.

 

You can always get cross browser with camelCase backgroundSize when using both width and height values.

 

If you use snake-case background-size then you can omit height.

 

Again not sure why that is, i just know i anytime i animate background-size i always use camel case backgroundSize and specify both even if i need to set the height to auto.

 

But the original question regarding background-position, thanks to Rodrigo's findings.. looks like it was being caused by an old GSAP version and IE progid:DXImageTransform filter. Which i have had issues with in the past.

 

In that case i always use backgroundPosition and specify both left and top, and of cource makes sure im using the lastest version of GSAP.

 

[ppdc 2 Likes (Newbie)]

I just experienced something similar regarding 'animating the backgroundPosition property:

It did work on my test-page, where I set up only the items I am animating (some puppet-style character animations).

 

But when I put the same exact elements into the real page it stopped working.

Using standard css-syntax [ css: {"background-position": "100% 0"}  ] I could get it to work again.

 

The difference being a whole lot of other javascript (and animations, too) going on on the page.

Unfortunately I don't have the time to set up a test to see at which point the functionality breaks.

Just mentioning that there is still some backround-position voodoo going on and for now it seems that snake-case fixes this.

[Jonathan 5,176 Likes (Superhero)]

Hello ppdc,

• Do you have an example of that page?
• Are you loading the latest TweenMax.min.js or TweenLite.min.js along with CSSPlugin.min.js?

Any additional info will be greatly appreciated.

 

Also just so you know the css:{} wrapper:

 

Note about css:{} wrapper

• Originally, css-specific properties needed to be wrapped in their own object and passed in like TweenLite.to(element, 1, {css:{left:"100px", top:"50px"}}); so that the engine could determine the properties that should be funneled to CSSPlugin, but because animating DOM elements in the browser is so common, TweenLite and TweenMax (as of version 1.8.0) automatically check to see if the target is a DOM element and if so, it creates that css object for you and shifts any properties that aren't defined directly on the element or reserved (like onComplete, ease, delay, etc. or plugin keywords like scrollTo, easel, etc.) into that css object when the tween renders for the first time. In the code examples below, we'll use the more concise style that omits the css:{} object but be aware that either style is acceptable.

CSSPlugin: http://greensock.com/docs/#/HTML5/Plugins/CSSPlugin/