{"issue":{"state":"closed","pull_request":{"diff_url":null,"html_url":null,"patch_url":null},"milestone":null,"user":{"avatar_url":"https://secure.gravatar.com/avatar/5dedbfe9f99b3254a9fd728567a8705e?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"5dedbfe9f99b3254a9fd728567a8705e","url":"https://api.github.com/users/clarkni5","login":"clarkni5","id":144497},"assignee":null,"updated_at":"2011-11-15T21:21:51Z","labels":[],"closed_at":"2011-11-15T21:00:17Z","comments":3,"url":"https://api.github.com/repos/jquery/jquery-mobile/issues/3045","body":"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.\r\n\r\nOn 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\r\n\r\nThe 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.\r\n\r\nUltimately, 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.\r\n\r\nHere is a minimal example.\r\n\r\n    <!DOCTYPE html> \r\n    <html> \r\n    \t<head>\r\n    \t<meta charset=\"utf-8\">\r\n    \t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> \r\n    \t<title>Test</title> \r\n    \t<link rel=\"stylesheet\" href=\"http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css\" />\r\n    \t<script src=\"http://code.jquery.com/jquery-1.6.4.min.js\"></script>\r\n    \t<script src=\"http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js\"></script>\r\n    \t<style>\r\n    \t\t.ui-bar-a {\r\n    \t\t\tborder: 1px solid red;\r\n    \t\t}\r\n    \t</style>\r\n    </head> \r\n    <body> \r\n    <div data-role=\"page\">\r\n    \t<div data-role=\"header\"><h1>Spoon</h1></div>\r\n    </div>\r\n    </body>\r\n    </html>","html_url":"https://github.com/jquery/jquery-mobile/issues/3045","title":"Pages with headers can move horizontally","number":3045,"id":2239345,"created_at":"2011-11-15T02:09:08Z"},"action":"created","comment":{"user":{"avatar_url":"https://secure.gravatar.com/avatar/4ec3e17536d217f2367be3aebb72a72b?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","gravatar_id":"4ec3e17536d217f2367be3aebb72a72b","url":"https://api.github.com/users/toddparker","login":"toddparker","id":359929},"updated_at":"2011-11-15T21:21:51Z","url":"https://api.github.com/repos/jquery/jquery-mobile/issues/comments/2751524","body":"Thanks for the tip. Just committed a fix:\r\nhttps://github.com/jquery/jquery-mobile/commit/fcce0c4915b0091ccd091f8dd3d2d67f9b7cb68b","id":2751524,"created_at":"2011-11-15T21:21:51Z"}}