BUG: Error when calling .transition() in IE 10

[ryansobol]

When using IE 10 and calling this function:

$(this).transition({
  scale:            1.05,
  backgroundColor:  "#8EC3DA",
  borderColor:      "#686868",
  duration:         150
});

I receive this error message:

SCRIPT438: Object doesn't support property or method 'setFromString' 
jquery.transit.js, line 598 character 9

Here's a screenshot:

As of writing, you can see the error in action at http://ryansobol.com by mousing over any of the social buttons.

NOTE: Everything works fine in IE 9, Chrome 19, Firefox 13, and Safari 5.1.

PS - I'm in love with this library. Keep up the great work!

[rstacruz]

I'd love to fix this but sadly I don't have a copy of IE10 to test. If anyone can help debug this issue, please do!

[rstacruz]

...but I'll try to get a hold of a copy of the Windows 8 VM image and see what I can do.

[ryansobol]

Totally understandable. Here's a link to download the Windows 8 release preview for free. (It's where I got my copy.)

http://windows.microsoft.com/en-US/windows-8/download

Then I just followed these instructions for installing with VMware Fusion.

http://www.satheesh.net/2011/09/14/how-to-install-windows-8-on-vmware-fusion/

NOTE: Be mindful of the 32-bit and 64-bit choices, depending on which type you download. I also recommend allocating at least 2 GB of RAM. And 32 GB of HD space should be plenty. (I think Windows 8 is around 10 GB after installation.)

[scoorey]

put this above the t.setFromString(prop, value) line (612) in jquery.transit.js:

t = (t === 'none') ? new Transform() : t;

the $(elem).css('transform') was returning a null string

[pakastin]

Didn't work for me. Any updates on this?

[MrGlasspoole]

Here the fix from scoorey works.

[SergeL]

I'm using jQuery 1.8 and the fix from scoorey worked very well.

[SuedeNimes]

This fix is slightly more robust than scoorey's.

Replace the first line of set: function(elem, value) with the following two lines in jquery.transit.js

var t = $(elem).css('transform'); t = (typeof t === 'string' || t === null) ? new Transform() : t;

The entire method should read as follows

set: function(elem, value) { var t = $(elem).css('transform'); t = (typeof t === 'string' || t === null) ? new Transform() : t; t.setFromString(prop, value); $(elem).css({ transform: t }); }

[srsgores]

Fix this in the next version please.

[tsvensen]

I'm using jQuery 1.8.1 and SuedeNimes updated method fixed the issue for me. Tested in IE7+, Chrome, Safari, Firefox.

[tsvensen]

Came across an additional bug in IE. I updated @SuedeNimes fix to include a check for t === undefined, which solved my problem. Hope this helps, should be near line 610.

set: function(elem, value) {
  var t = $(elem).css('transform');
  t = (typeof t === 'string' || t === undefined || t === null) ? new Transform() : t;
  t.setFromString(prop, value);
  $(elem).css({ transform: t });
}

[jroeckle]

tsvensen's fix worked like a charm for me! Thanks everyone!

[pikkiegreg]

tsvensen's fix worked for me too. Should add this to the project.

[oksanaut]

tsvensen's fix worked for me on jQuery 1.8.2 (error was seen in every major browser on Mac).

[giboow]

a most clean solution... :

  get: function(elem) {
    var t = $(elem).css('transform');
    if(!(t instanceof Transform)) {
     t = new Transform();
    }
    return t.get(prop);
  },

  set: function(elem, value) {
    var t = $(elem).css('transform');
    if(!(t instanceof Transform)) {
     t = new Transform();
    }
    t.setFromString(prop, value);

    $(elem).css({ transform: t });
  }

[rstacruz]

Fixed.