jQuery mobileでdata-trasition="slide"をしてもslideしなくて激しく困った。
あまりよくまとまってないけれど…。
slideさせたい環境
AQUOS PHONE 102SH上でwebviewを使った、(自作)ブラウザアプリ。
<header data-role="header" data-position="fixed"> </header>
というように、何故かheader部にdata-role,data-positionしてあげるとslideしてくれた。
(header部に特定せずにfooter部とかでも、可能かと思われる。
たまたま、header部を以上の様に弄ったらslideしてくれたというだけ。)
けど、片方でも無いとslideしてくれなかった。
でも、それは問題で。
data-系が無くても、chromeさんではslideするし、
そもそもdata-position="fixed"って、slideさせる為のものでないし。
- 原因1
リンク先のページにリンク(aタグ)がなければ、 slideしてくれるぞ。
ってことが判明。
それってどういうことよ。
ajaxが影響しているのかな?と思ったり。
でも、ajax無いとslideそもそもできないしな。
てこどで、aタグを無くす方法は駄目。
- 原因2
fixed+fullscreenをしたら、要素が完全に被ってしまった。
ので、heightの認識が甘いのかな?
じゃあwidthも甘い?
fixedで固定することでそれらを認識できて、slide出来るようになっているのかな?
と考えた。
(確か、slide系はCSSのpositionの値を加算減算して動かしている。)
で、"なんとなく"。
<div data-role="content"> </div>
をしてあげたら上手くいった。
試しに<div></div>だけもやってみたら、ひとまず上手くいった。
ちなみに、ギャラクシーネクサスさんで動かしたら、こんなことせずともslideしてくれた。
だので…
Androidのバージョンとかによる、webviewとかwebkit辺りが怪しいのかなぁ………。
とか、思いました。
まとめ
<!DOCTYPE html><header><div><footer>をしっかりやれば良かった。
んじゃないかなと。
とはいえ、原因が判然としないので、今後も調査は継続していこう。