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

富士箱根測量オフィシャルブログが面白い


神奈川県の箱根にある富士箱根測量という測量会社さんのブログなんだけれども面白いのだ。 測量?というとなんか二人一組になって道路のこっちと向こうに立ち、ひとりがうつむき加減で棒を立ててじーっとし、それ...つづきはこちら