Xcode 5.0.2 iPhone実機でWebViewの表示がずれる場合の対処法

XcodeのStoryboardで、Navigation Controllerを使って、Table ViewからWeb Viewへの画面遷移をさせていたところ、実機のiPhone 5(iOS 7.0.4)での表示が、くずれてしまいました。Top Barの下に、Web Viewの表示が潜り込んでしまって、さらにBottom Barが上にずれてしまっています。

崩れた表示

Top Barが半透明扱いであることが理由で起こる現象らしいのですが、おかしい。Table ViewのTop BarはちゃんとOpaque Navigation Bar(不透明なナビゲーションバー)にしてあるのに。

Xcode Storyboard

…と思ったら!Navigation ControllerのTop BarをOpaque Navigation Bar(不透明なナビゲーションバー)にするのが正解でした!

Xcode Storyboard

こうすることで、iPhone実機でもこのように正常に表示されました。

正常な表示

ちなみに、Web ViewのBottom Barも、Opaque Navigation Bar(不透明なナビゲーションバー)にしておかないと、「戻る」「進む」「Refresh」「Stop」のボタンも隠れてしまいます。

Xcode Storyboard

iOSシミュレータでの予習では気がつかなかった、このミス。やはり実機での検証は必要ですね。