2020年3月17日 星期二

css的transition在android chrome瀏覽器上的問題css background image with transition problem on android chrome

使用css設定transition時
background image的屬性在android的chrome瀏覽器會遇到錯誤的狀況,記錄如下

遇到的錯誤狀況是在使用jquery針對被點擊的按鈕執行addClass跟removeClass的動作時
如果增加的class內有設定改變background image,在android的chrome上會顯示不出來

主要原因在於下面標示的部分:

transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;

只要把all屬性改為明確指定屬性,就不會出現錯誤狀況,如下:

transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;

沒有留言: