iOS実機でtransformが効かない

手持ちのiOS8.1のiPhone5sとiOS8.4のiPad Air2実機でtrasnformプロパティが上手く機能せず、予想外にハマってしまったので、メモ書きに。

 

例えば簡単なメニューを作成する際に”▲”をrotate(90deg)させて使ったりすると、手軽で便利ですよね。

HTMLは単純です。

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
<li>リスト4</li>
<li>リスト5</li>
</ul>

cssはこんな感じ。

li:before{
    content: "▲";
    display: inline-block;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    margin-right: 0.5em;
}

これならiOS実機でも問題なく回転してくれます。

 

ところが、transitionを含めたrotateとなると、一般的な指定方法ではiOS実機が動いてくれません。
↓マウスをhoverさせると”▲”が回転します。

HTMLを変えました。

<ul>
<li><span>▲</span>リスト1</li>
<li><span>▲</span>リスト2</li>
<li><span>▲</span>リスト3</li>
<li><span>▲</span>リスト4</li>
<li><span>▲</span>リスト5</li>
</ul>

cssはこう。

li span{
    display: inline-block;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    margin-right: 0.5em;
}
li:hover span{
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}

もちろんタッチパネルの端末なので、実際の運用時ではhoverではなくクリックでの操作を当てているのですが、ベンダープレフィックスをつけても、iOSの実機だけがウンともスンとも言いません。
SafariでもChromeでも同じでした。

 

こんな一般的な事案なのに、探し方が悪いのか検索しても同じ状況の方が見当たらなかったのですが、英語のAppleのフォーラムでは、iOS8絡みのcssのトラブルが結構ありました。
 
そこで書かれていたのはtransitionの指定方法。

    -webkit-transition: all 0.4s;

ではなく

    -webkit-transition: -webkit-transform 0.4s;

こう書くと、確かに手持ちのiOS8.xの実機でも上手く機能しました。

 

…あれ、常識でしたか…？（汗）