Androidタブレットで発生するカルーセルの機種依存事例

見つかった現象

Carousel（またはRotateCarousel）と、Justifyというx-fitオリジナルのタッチUI部品を連携させた場合に発生する現象です。

Justifyで3つの画像を並べ、それをCarouselに3セット分取り込んでいます。スワイプしていくと、Justifyが1セットずつ表示されるコンテンツです。

正常な状態

機種名：iPad

iPadで見たときは以下のような状態で、3画像1セットが整然と並んで表示されます。

ソース

<carousel view-vwidth="100%" view-hwidth="100%" class="carousel" view-class="view"
inner-class="inner">
    <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%"
    x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%">
        <item src="img/sample_1.png" />
        <item src="img/sample_1.png" />
        <item src="img/sample_1.png" />
    </justify>
    <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%"
    x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%">
        <item src="img/sample_2.png" />
        <item src="img/sample_2.png" />
        <item src="img/sample_2.png" />
    </justify>
    <justify x-vcol-count="3" x-hcol-count="3" x-margin-left="5%" x-margin-right="5%"
    x-img-margin="5%" x-vwidth-control="100%" x-hwidth-control="100%">
        <item src="img/sample_3.png" />
        <item src="img/sample_3.png" />
        <item src="img/sample_3.png" />
    </justify>
    <viewpoint x-on-class="on" x-off-class="off" div-class="point"></viewpoint>
</carousel>

機種依存の事例

発生した機種名： L-06C、F-01D、Sony Tablet S、SC-02D(GALAXY Tab 7.0 Plus)、ETBW11AA

今回発生した現象です。

上記のAndroidタブレットで見ると、改行されたかのようにJustify1セットが縦に並んで表示されます。

細かく調査していくと、フロートさせているブロック要素の幅をjQueryで取得すると値が不正になる、ということが判明しました。

回避策

Justifyをdivタグで囲うことでこの現象は発生しなくなりました。

まとめ

スマートフォンブラウザにおけるJavaScriptの処理は、予期しないことが見つかります。x-fit部品の実機検証の過程で見つかる機種依存事例を、今後も紹介していきます。お役に立てば幸いです。