iPad miniのsafariで、文字が一文字だけ落ちる
条件がいまいち確実にわからないのですが、iPad miniでレイアウトが崩れることがあるようです。
おそらく条件はこんな感じ。
・display:inline-blockを指定している
・iOS9
どんな現象かというと、文字であらわすとこんな感じです。
【正しい表示】
このボタンをクリック
【1文字落ちた表示】
このボタンをクリッ
ク
派生して、overflow:hiddenを同時に使っている場合は、最後の1文字が消える現象のようにも見えます。
また、改行する要素としない要素が並んでいる場合、inline-blockは基本が下ヨセなので、頭がそろわずにガタガタになります。
どうやらiOS9のバグなのではないかと思いますが、簡単に解決する方法があります。
それは、
white-space:nowrap
を指定する。
これで落ちなくなります。
nowrapが指定できない場合は、、、、困りますね。
おそらく条件はこんな感じ。
・display:inline-blockを指定している
・iOS9
どんな現象かというと、文字であらわすとこんな感じです。
【正しい表示】
このボタンをクリック
【1文字落ちた表示】
このボタンをクリッ
ク
派生して、overflow:hiddenを同時に使っている場合は、最後の1文字が消える現象のようにも見えます。
また、改行する要素としない要素が並んでいる場合、inline-blockは基本が下ヨセなので、頭がそろわずにガタガタになります。
どうやらiOS9のバグなのではないかと思いますが、簡単に解決する方法があります。
それは、
white-space:nowrap
を指定する。
これで落ちなくなります。
nowrapが指定できない場合は、、、、困りますね。
コメント