CSS樣式與Sencha觸摸不能正常工作

我正在構建一個sencha應用程序。我想嘗試使用像控制一樣的ios開關。爲此，我在CSS中使用它：jsfiddle Demo（感謝Lea Verou http://lea.verou.me）CSS樣式與Sencha觸摸不能正常工作

從jsfiddle中可以看出，css在瀏覽器上工作得很好。

但是，在將它添加到我的sencha應用程序並在設備上運行後，它會混亂。動畫不再玩和YES側搞砸：

Yes side

可能是什麼問題？ CSS的某些部分與sencha應用程序不兼容？爲什麼它在瀏覽器上正常工作，而不是在設備上？

信息

我書面方式我的CSS在SASS文件，然後用羅盤編譯（這是推薦的方法）。

我SASS文件還包括一些煎茶的基本樣式：

//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中有一個開關窗體控件，但它看起來不像ios，所以我不得不使用上述。

謝謝

來源

2013-05-22 Youssef

「我知道有在煎茶開關形式的控制，但它不完全一樣的IOS之一，所以我不得不使用上面。」你可以設計它。 –

我修改了CSS中的第三個塊。我將寬度從1em增加到3em。

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

Here is the working fiddle.

來源

2013-05-22 14:04:49 blessenm

非常感謝您修正了尺寸，但「YES」的藍色仍然沒有出現，並且設備上沒有播放動畫。你有這個想法嗎？非常感謝 – Youssef

看來問題是與CSS漸變和轉換的ios兼容性。試試這個更新的小提琴。 http://jsfiddle.net/blessenm/Typ3C/5/。我修改了第二個CSS塊的背景圖像值。在我的ipod上運行的ios 6工作。生病看我明天是否可以看到動畫。 – blessenm

再次更新小提琴現在支持動畫。在第二個CSS塊的轉換屬性中添加了-webkit前綴。 http://jsfiddle.net/blessenm/Typ3C/6/ – blessenm

CSS樣式與Sencha觸摸不能正常工作

回答

相關問題