CSS style not working correctly with Sencha touch

Question

I am building a sencha application. I want to try to use an ios switch like control. For that I have it in CSS: jsfiddle Demo (Credit to Lea Verou http://lea.verou.me )

As you can see from the jsfiddle the css works perfectly fine on the browsers.

However after adding it to my sencha application and running it on the device it is messed up. The animation is no longer playing and the YES side is messed up:

What might be the problem? Are some parts of CSS not compatible with sencha apps? Why is it working normally on browsers but not on devices?

Additional information

I writting my CSS in a SASS file and then compile it with Compass (that's the recommended approach).

My SASS file also include some of sencha's base styles:

//I PASTED THE SWITCH CSS (FROM THE FIDDLE EXAMPLE) HERE

//IMPORTING THE SENCHA STYLES THAT I WILL USE
//Sencha Css
@import 'sencha-touch/default/all';

//Including Pictos we need to use
@include pictos-iconmask('team1');
@include pictos-iconmask('user3');
@include pictos-iconmask('settings7');
@include pictos-iconmask('shop1');

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-layout;
@include sencha-carousel;
@include sencha-msgbox;

What might be the problem?

PS: I know there is a switch form control in sencha but it does not look exactly like the ios one so I had to use the above.

Thanks

Answer 1

I modified the third block in the css. I increased the width from 1em to 3em.

input[type="checkbox"].ios-switch:checked + div {
    padding-left: 2em;
    width: 3em;
    background-position: 0 0;
}

Here is the working fiddle.