OnsenUI ons-carouselとステータスバー

環境はこちら

自分のiPhone6 ios9.1で動作確認していると
A,B,Cというページが存在していて
A⇒Bに遷移するとなぜかBに配置してある画像の位置がおかしい
B⇒Cに遷移してpopPageする(Cを消す)とBに配置してある画像が正しい位置に表示されている

なんだこれは!

背景色つけて試してみると、なぜかons-toolbarにdivが重なっている(divが上に上がっている)ため、
画像がずれて表示されていることが判明
divの中身はons-crouselがあってその中にons-crousel-itemがあってpがあってimgがあってという状況

divのtopの値を取得するとA⇒Bの時点では42px、B⇒C⇒Bの時点では62pxと出た
20pxずれとる!

まず、Javascriptで何か変なことしていないか確認してみるということでjavascriptを読み込まないようにしたが、特に変わらず
こうなるとhtmlで悪さをしているに違いないので、ons-toolbarとdiv(背景色とサイズだけ指定)だけ配置して確認してみた
するとなぜかきれいに配置された(重なってない)
ということは消した中に犯人がいる!

1つずつ戻してみた
まぁタイトルにもあるように犯人はons-carouselなんだけど

ripple上では問題なく表示されていた(rippleはios6)ので
予想だけどずれた20pxはステータスバーと関わりがあるのではなかろうか…
詳しい原因はよく分かっていないが、Javascriptで動的にons-carouselを追加するように変更したら正しく配置された!
でも他の画面ではons-carousel使ってないのに同じ現象が・・・

動的に作ればOKなんだろうけど・・・
誰かもっといい解決方法教えてー!

Comments are closed.

Post Navigation