CSS样式无法与Sencha touch一起正常工作

我正在构建一个sencha应用程序。我想尝试使用ios交换机之类的控件。 为此，我在CSS中使用了它：（归功于LeaVerou）

从JSFIDLE中可以看到，css在浏览器上工作得非常好

但是，在将它添加到sencha应用程序并在设备上运行之后，它就变得一团糟了。动画不再播放，并且是一侧混乱：

有什么问题吗？CSS的某些部分是否与sencha应用程序不兼容？为什么它在浏览器上正常工作，但在设备上却不正常

其他信息

我在一个SASS文件中编写CSS，然后用Compass编译它（这是推荐的方法）

我的SASS文件还包括sencha的一些基本样式：

//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;

有什么问题吗

---

PS：我知道sencha中有一个switch表单控件，但它看起来与ios控件不完全一样，所以我不得不使用上面的控件

---

谢谢

我修改了css中的第三个块。我把宽度从1em增加到3em

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

---

“我知道sencha中有一个switch form控件，但它看起来与ios控件不完全一样，因此我不得不使用上面的控件。”您可以对其进行样式设置。谢谢您修复了大小，但“是”的蓝色仍然没有出现，动画也没有在设备上播放。你对此有什么想法吗？谢天谢地，问题似乎在于ios与css渐变和过渡的兼容性。试试这把更新过的小提琴。我修改了第二个css块的背景图像值。在ios 6上运行的ipod中工作。我看看明天是否能让动画工作。再次更新小提琴，现在支持动画。在第二个css块中的转换属性中添加了-webkit前缀。非常感谢。它工作得非常好。我想奖励你在23小时内的努力。你能用新的小提琴编辑你的答案吗？以防有人在找它