mootools/mootools-core — Issue #2160: Fx.Tween/Fx.Morph problem with '%' unit
Author: stecb
Created: 2011-12-07 12:58:44+00:00
State: open

Given this element:

```html

box

```

and this related css:

```css
#box{
position:absolute;
width:200px;
height:200px;
left:10%;
background:red;
}
```

I want to animate the box from 10% (original css value) to 50%, and the js is the following (wrapped inside a domready callback)

```javascript
$('box')
.set('morph',{unit : '%'})
.morph({'left' : 50});
```

Demo : http://jsfiddle.net/steweb/6EnuH/

**The problem**: on firefox (and opera 11.5 on ubuntu), the initial morph value (that should be 10%), that is calculated by `getComputedStyle`, will return the px value (see https://bugzilla.mozilla.org/show_bug.cgi?id=707691). Therefore the animation will start from a wrong offset. On the other browsers (opera on mac os, chrome, safari, ie) the behav is correct.

Taking a look at the code, on the `Fx.Css` class, there's the code of the `prepare` method:

```javascript

//prepares the base from/to object

prepare: function(element, property, values){
values = Array.from(values);
if (values[1] == null){
values[1] = values[0];
values[0] = element.getStyle(property); //with unit '%' the initial value will be the computed in px on ffox
}
var parsed = values.map(this.parse);
return {from: parsed[0], to: parsed[1]};
}
```

A possible solution (tested) could be: if the unit is set to '%' (`this.options.unit`) put the element to `display:none` and once the value is retrieved, set it back to `display:block` (see https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7)