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

もう無人の無線操縦でいいんじゃないだろうか
日産自動車の電力駆動レーシングカー「Nissan ZEOD RC」


日産自動車が世界最速の電力駆動レーシングカー「Nissan ZEOD RC」を公開とあったので見てきたが、なんかもうこんなのばっかりがサーキットでびゅんびゅん走ってたってちっとも面白くない。なんかもうクルマのス...つづきはこちら