Pages with headers can move horizontally #3045
Description
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<style>
.ui-bar-a {
border: 1px solid red;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>Spoon</h1></div>
</div>
</body>
</html>