Jump to content
Search Community

IE8, sprites and scale

ditorelo test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Greensock universe,

IE is giving me grief, as expected. After a day of fighting with this, I decided to come to you for a shoulder and some sound advice.


We have an animation working BEAUTIFULLY in all browsers but IE8 (haven't even looked IE7 yet, not sure if I ever will). At one stage, our main character gets scaled down, which is done using the code below.

TweenMax.to(user.sprite(), 1, { scale: 0.6, 
  onStart: function() {
    //Kick spritesheet animation in

This character has a few different sprite sheets for it so it can walk and jump around the page. The sprite sheet animation is done with background-position management (this is NOT done using TweenMax).


All browsers report the full width of the div that has the character in it, even when the element is scaled down (144px). We use this width to updated the background-position for the spritesheet animation. 




IE8 reports a different width as it scales the object down (86.4px final width), and, because the sprite sheet file is based on a 144px width, it all turns to custard. I attached an image of how the character looks after both the scaling and sprite sheet animations are completed.


All other browser play ball with no problems what so ever.


Any ideas? Help me please? :)



Link to comment
Share on other sites

Ah yes, I believe that's because in IE8 (and earlier), the ONLY way to apply transforms like rotation and scale was to use an IE-specific matrix "filter" and adjust the size to fit the filter. Huge headache to work out the math and intricacies. 


So to accurate measure the size, you'd need to remove the filter and check the element's offsetWidth and offsetHeight. Like:

//store the original filter
var originalFilter = element.style.filter,
    width, height;
//remove the filter
element.style.filter = "";
//record the width/height
width = element.offsetWidth,
height = element.offsetHeight;
//now re-apply the original filter
element.style.filter = originalFilter;

Does that work for you? I know, it's a huge pain but remember, you're dealing with IE8 ;)

Link to comment
Share on other sites

Sorry it took me so long to come back to this.


Yeah, this works. One of the solutions I tried was saving the dimensions of the sprite prior to scaling and going from there (your solution is way more elegant though).


Turns out I have another problem and that was regarding how IE8- sets the background position. I found this code somewhere on the Interwebs that addressed the problem.

$.fn.backgroundPosition = function() {
  if(typeof(arguments) != "undefined" && arguments.length > 0)  { 
    if(typeof($(this).css("background-position")) != "undefined" && !$('html').hasClass("lt-ie9"))  { //dirty drity ie8 (if <html> should have an appropriate class to identify browsers lesser than IE9)
      $(this).css("background-position", arguments[0]); 
    } else {
      var bgPos = arguments[0].split(" ");

      if (typeof(bgPos.length) !="undefined" && bgPos.length < 2) {
        bgPos = Array("","");

      $(this).css("background-position-x", bgPos[0]) 
          .css("background-position-y", bgPos[1]);     
    return $(this); 
  } else {
    if(typeof($(this).css("background-position")) != "undefined") 
      return $(this).css("background-position"); 
      return $(this).css("background-position-x")+" "+$(this).css("background-position-y"); 

Thought I would share for the generations to come, even though it is not related to GreenSock (maybe plug-in in the next release I hear you say?).  :-P


I'm still having other problems with IE, but now that I'm aware of how it deals with scaling I'll devise annoying work arounds.


Thanks once again Greensock. You rock my GREEN SOCKS off (like Green day or something).

Man, I'm so funny...  :mrgreen:

Link to comment
Share on other sites

I'm confused, are you saying that GSAP is incorrectly setting background position in IE8? CSSPlugin already has a pretty detailed method for calculating and setting background position and it seems to have been developed with IE's position-x/y reporting in mind. If there is a problem would you mind posting a reduced example of it occurring (codepen or jsfiddle perhaps)?


I found similar code to that on the jQuery forum that suggests jQuery doesn't handle this by default (well, 2 years ago at least...) - is the problem specific to when you use jQuery to set background positions? If so, you can use GSAP to set values as well, which gives the benefit of having the properties applied consistently with your tweens:

TweenLite.set(element, { backgroundPosition:"10px 10px" });
  • 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...