pxgrid/js-flipsnap — Issue #6: BlackBerry端末にて表示不具合
Author: oosugi20
Created: 2012-02-19 16:29:09+00:00
State: open

検証機はシミュレーターですが、BlackBerry 9900 にて要素が全く表示されなくなる不具合がありました。

原因は、translate3dのようで、JSからでなく、CSSでtranslate3dをかけた場合も同様の不具合がでました。

hasProp関数の部分で、styleのプロパティをセットしてみたところ、普通にセット自体はできているが表示されないという状況でした。

他のCSSプロパティと複合して起きる不具合かもしれませんが、取り急ぎこちらで使用する際は、以下のようにUser AgentでBlackBerryだけ2dを使うように変更して使いました。
（全部2dでいいじゃんと思ったんですが、なんだか2dの方が3dより動きがスムーズじゃなかったんですよね。。。）

参考まで報告でした。

function getTranslate(x) {
// 2012-02-20 modified by oosugi@skillpartners.co.jp
// BlackBerry端末でtranslate3dを使用すると不具合。
// translate3dがかかった要素が表示されなくなる。
// 2dの方は問題ないが、他の端末で3dよりアニメーションのスムーズさにかける。
// transform3dプロパティは問題なくセットできてしまうため、
// これで分岐させることができなかった。
// userAgentからBlackBerryのみ2dで返すように変更。
if (navigator.userAgent.indexOf('BlackBerry') !== -1) {
return 'translate(' + x + 'px, 0)';
}
else {
return support.transform3d
? 'translate3d(' + x + 'px, 0, 0)'
: 'translate(' + x + 'px, 0)';
}
}