【IE Mobile】WindowsPhoneのposition系のプロパティ操作備忘録

    最近構築をしているモバイルサイトでアニメーションを使って画面下方から
    メニューコンテンツを表示する動作を実装していましたが、
    そのときにWindowsPhone環境ではまったので、その備忘録です。

    対象環境:WindowsPhone8.1の【InternetExplorer Mobile 11.0】

    事象
    jQueryでメニューコンテンツを表示するアニメーションを実行するとメニューが出てこない。

     

    この事象をよくよく調べてみると、画面の下へスクロールしたらメニューが出ているので、Javascriptのエラーではないようです。
    HTMLはごく普通の<ul>+<li>タグの組み合わせでパネル状にしたCSSデザインです。

    CSSプロパティは

    • position:absolute;
    • bottom:0;

    と、絶対配置宣言(absolute)のpositionプロパティを使っていました。
    アニメーションさせていたのは「bottom」プロパティです。ですが、IE Mobileではうまく動きません。

    なぜなのか。とりあえず、IE系でよくある事象を列挙してみました。

    IE系のありがちな事象

    • position系のプロパティはright, bottomが効かない
    • margin系のプロパティが効かないことがある

    position系で「top」プロパティをアニメーションで変化させてみたら・・・。見事動きました!

    【結論】 IE Mobile系はposition系のうち「right」「bottom」が効かない!

    似たカテゴリーの投稿