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

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

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

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社側で対応されることで崩れてしまうためです。

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

著者のイメージ画像

BringFlower|稲田 高洋

2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。2010~2018年に人間中心設計専門家を保有。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。