iPad miniのsafariで、文字が一文字だけ落ちる

条件がいまいち確実にわからないのですが、iPad miniでレイアウトが崩れることがあるようです。
おそらく条件はこんな感じ。

・display:inline-blockを指定している
・iOS9

 どんな現象かというと、文字であらわすとこんな感じです。

【正しい表示】
このボタンをクリック

【1文字落ちた表示】
このボタンをクリッ


派生して、overflow:hiddenを同時に使っている場合は、最後の1文字が消える現象のようにも見えます。
また、改行する要素としない要素が並んでいる場合、inline-blockは基本が下ヨセなので、頭がそろわずにガタガタになります。

どうやらiOS9のバグなのではないかと思いますが、簡単に解決する方法があります。
それは、

white-space:nowrap

を指定する。
これで落ちなくなります。
nowrapが指定できない場合は、、、、困りますね。

コメント