Animation doesn't work on iOS since i tried to make my app having a responsive design

in my application i have a view : accueilscreen.xml

<Alloy>
    <View>
        <ScrollableView id="scrollableView" showPagingControl="true" visible="true" />
        <ImageView id="accOptsView" image="images/accOptsViewFr.png" />
        <View id="topbookinBlock" > 
            <View id="topbookin">
                <View id="topbookinbgrnd"/>
                <Label id="topbookinLabel" >TOP BOOKING</Label>
            </View>
            <ScrollView id="scrollView" backgroundColor="yellow"  />
        </View> 
    </View> 
</Alloy>

and its styleSheet :

"#accOptsView":{
    top:'32.56410256410256%', // 127 de 390
    width:Ti.UI.FILL,
    height:'15.128205128205128%'
}
 
 
"#scrollableView":{
    top:0,
    width:Ti.UI.FILL,
    height:'30.76923076923077%', // 120 de 390
    pagingControlColor :'black',
    pagingControlAlpha :0.5
}
 
"#topbookinLabel":{
    font: {
    fontSize :'2sp'     
    },  
    color:"#C29531"
}
 
 
"#topbookin":{
    top:0, // 0 de 286
    borderColor :"#C29531",
    borderWidth : 0.5,
    height:'6.993006993006993%', // 20 de 286
    left:'-0.625%',
    width:'101.25%' 
}
 
"#topbookinbgrnd":{
    top:0,
    left:'-0.625%', // -2 de 320
    opacity:0.5,
    width:Ti.UI.FILL,
    height:Ti.UI.FILL,
    backgroundColor:'black' 
}
"#scrollView":{
    top:'10.48951048951049%',
    height:'59.34265734265734%', // 164 de 286
    width:"95%"     
}
 
 
"#topbookinBlock":{
    top:"49.743589743589745%",  // 194 de 390
    height:"73.33333333333333%"  // 480 - 194 = 286 de 390 
}

Somewhere else in my app i try to animate the 'scrollView' (its id is 'scrollView' also)

Alloy.Globals.accueilscreenCtrl.scrollView.setHeight('79.48717948717949%');
 
Alloy.Globals.accueilscreenCtrl.accOptsView.animate({
    top : '79.48717948717949%'
});
 
//Alloy.Globals.accueilscreenCtrl.scrollView.setTop(0);
Alloy.Globals.accueilscreenCtrl.scrollView.animate({
     top : 0
});

This problem only happened since i changed my app dimensions to percentage. This same animation used to work fine when dimensions were in dp. Here is the same view and all the code before changing its dimensions to percentage and in which the animation works fine :

accueilscreen.xml :

<Alloy>
    <View>
        <ScrollableView id="scrollableView" showPagingControl="true" visible="true" />
        <ImageView id="accOptsView" image="images/accOptsViewFr.png" />
        <View id="topbookinBlock">  
            <View id="topbookin">
                <View id="topbookinbgrnd"/>
                <Label id="topbookinLabel" >TOP BOOKING</Label>
            </View>
            <ScrollView id="scrollView" height="147" width="95%"/>
        </View> 
    </View> 
</Alloy>

accueilscreen.tss

"#accOptsView":{
    top:127,
    width:Ti.UI.FILL,
    height:59
}
 
 
"#scrollableView":{
    top:0,
    width:Ti.UI.FILL,
    height:120,
    pagingControlColor :'black',
    pagingControlAlpha :0.5
}
 
"#topbookinLabel":{
    font: {
    fontSize :2     
    },  
    color:"#C29531"
}
 
 
"#topbookin":{
    top:194,
    borderColor :"#C29531",
    borderWidth : 0.5,
    height:20,
    left:-2,
    width:324   
}
 
"#topbookinbgrnd":{
    top:0,
    left:-2,
    opacity:0.5,
    width:Ti.UI.FILL,
    height:Ti.UI.FILL,
    backgroundColor:'black' 
}
"#scrollView":{
    top:224     
}

the animation code :

Alloy.Globals.accueilscreenCtrl.scrollView.setHeight(310);
 
Alloy.Globals.accueilscreenCtrl.accOptsView.animate({
     top : 310
});
 
Alloy.Globals.accueilscreenCtrl.scrollView.animate({
      top : 0
});