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>をしっかりやれば良かった。

んじゃないかなと。

とはいえ、原因が判然としないので、今後も調査は継続していこう。