jquery/jquery-mobile — Issue #3045: Pages with headers can move horizontally
Author: clarkni5
Created: 2011-11-15 02:09:08+00:00
State: open

You can observe this problem using the online docs (V1 RC3). I'm using an iPod Touch (3rd gen.), but I suspect it is a problem with other devices.

On any page with a header (data-role="header"), I can pull the entire window (and browser chrome) horizontally. Removing the header stops this behavior, so I know it's not normal. Here is a picture: http://t.co/arafqiML

The cause of this is a 1 pixel border on the .ui-bar-[a-z] style definition. In the docs, it is the .ui-bar-f style that is causing this. The border must be causing the viewport to expand such that the browser enables horizontal scrolling.

Ultimately, this may be a problem with the theme roller because I noticed the problem when using a style from theme roller and the default style does not cause this problem. However, I wonder if there is a more general change that can be made to prevent a border on this element from causing this problem. It seems like putting a border on the header element is a reasonable thing to do and should not cause the viewport to expand.

Here is a minimal example.

Test

Spoon