Mootools 1.2.5 Element.setStyle / Morph

Question

I recently made a Mootols script for my website. Using Fx.Morph, I succesfully created the effects I was aiming for. However, the script fails in Internet Explorer 7 and 8 (works fine in 9, didn't not bother to check IE6). I am using mootools 1.2.5.

Digging up the problem, I could figure out the following

• All my problems are coming from Fx.Morph, who calls setStyle with invalid values
• Somehow, while morphing height of an element from 0px to 160px, setStyle is called with a negative value (such as -3px) <---- this is where IE throws an error

For now, I "patched" the error by doing the following in the setStyle function of the Mootools core:

if((Browser.Engine.trident && value[0] == '-' && (property == 'height' || property == 'width')) || value[0] == 'N')
    value='0px';

Anyone has some more info on this issue or experienced a similar problem?

Answer 1

It seems like Morph doesn't care if it is about to call setStyle with invalid property/value combo and setStyle doesn't either care if it is about to set an invalid value for a specified property.

With this in mind, my problem came from the effect I was using. I was using something like "Bounce.easeIn" with an element that had to morph height from 0px to 160px. Morph would then call setStyle with negative values.

In my case, setting the effect to "linear" made it works like expected.

In my opinion, Morph should be "aware" of what it is about to do and prevent calling setStyle with invalid values. Element.setStyle should also throw an error when he is called with impossible property / value instead of letting browser crash/handle the problem. I'll see if this has been fixed in 1.3 and open a ticket if not.