flexboxに関するiOSのバグと回避方法

flexboxは比較的新しい仕様で、調べると仕様として登場したばかりの数年前までは各種ブラウザでバグが見られたようです。今は、少なくとも当方開発環境であるWindows×Chromeの組み合わせで、目立ったバグは見当たらないのですが、iOSはバグがあります。

iOSはflexboxに関わるバグが間違いなくいくつかあるのに、不思議と調べても出てこないんですが、１つバグの条件を特定したので、今回はそのバグ条件と回避方法をご紹介します。

flexboxに関するiOSのバグ出現条件

writing-mode: vertical-rl;で縦書きにした要素をdisplay: flexにしても、左右中央に揃わないことがわかりました。右側に寄ってしまいます。縦書きは海外ではあまり使われないから？これ以外もflexboxがiOSでまともに効いてない状況があり、それは発生条件がよくわかっていません。

次に紹介する方法で致し方なく調整することがあります。

致し方なくの回避策「CSS Browser Selector」

ブラウザ、OSごとにCSSを当てることができるJSライブラリがあります。次のリンク先からダウンロードできます。

CSS Browser Selector

ダウンロードして読み込み

</head>より前で、ダウンロードした「css_browser_selector.js」を読み込みます。

CSSの当て方

iOSの場合、端末ごとという形になりますが、以下のように記述して個別にスタイルが当てられます。

.ipod{
   /*記述*/
}
.iphone{
   /*記述*/
}
ipad{
   /*記述*/
}

iOS以外に使う羽目になる予感は今のところ私はしませんが、他のも以下の通り公式サイトに載っています。ブラウザごとにあてる記述もありますので、必要な方は公式サイトを見てください。

• win – Microsoft Windows (all versions)
• vista – Microsoft Windows Vista
• linux – Linux (x11 and linux)
• mac – Mac OS
• freebsd – FreeBSD
• ipod – iPod Touch
• iphone – iPhone
• ipad – iPad ^new
• webtv – WebTV
• j2me – J2ME Devices (ex: Opera mini) ^{changed from mobile to j2me}
• blackberry – BlackBerry
• android – Google Android
• mobile – All mobile devices

flexboxのバグの場合の修正方法

先ほどご紹介したバグの場合、paddingで無理矢理調整しました。

まとめ

flexboxに対するiOSのバグについては、さすがに修正入るだろうと思っているので、この方法での実装側での対応は、私の場合サイトの運用をお任せいただいているケース以外は避けたいと思っています。これで無理矢理調整すると、Apple社側で対応されることで崩れてしまうためです。

早く対応してくれないですかね・・