COLUMN > GENERAL

bxsliderのCSSに注意


bxsliderはタグにCSSをインライン記載するが、ul class="bxslider" のところにインラインさせるCSSに書き込まれる「translate3d」が原因で、Android純正ブラウザにおいてそれ以降どこかでrotateを使っていたりするとそのrotateが効かなくなることがある。
transform:translate3dを使うとそれ以降rotateが効かなくなるというのはネットで見つけたが、私が遭遇したケースではrotateが効かなくなるというのはtransform:translate3d直後からというわけでもなかった。ソース上の位置とか、css上の位置とかなんかもう1つ要因がある様に思う。
とりあえずアンドロイドでtransform:rotateが効かないところがある、そういえばbxsliderも使っているという場合は以下の様にbxsliderのjsファイルの中でtransform:translate3dを書き出している部分を修正する必要がある。


//var propValue = slider.settings.mode == 'vertical' ? 'translate3d(0, ' + value + 'px, 0)' : 'translate3d(' + value + 'px, 0, 0)';
var propValue = slider.settings.mode == 'vertical' ? 'translateY( ' + value + 'px) ' : 'translateX(' + value + 'px)';



あとオマケだが、bxsliderのオプションでmode: 'fade'を指定すると、Android2.3系標準ブラウザでダメ。

jQuery Content Slider | Responsive jQuery Slider | bxSlider



LINEで送る
PREV : 東京ガスの検針の人はどこから現れ、どこに消えるのか?
NEXT : spモードでHTMLメールで埋め込みリンクOK

どこへいくのか、インターFMのレディオディスコ


インターFM(76.1MHz)のラジオディスコ、レッツグルーヴって80’sディスコミュージックをかけてるというか、かけてた番組だけども、開始当初は確かに良かった。放送時間も短くて始発間際のディスコといった感じで...つづきはこちら