1

Expected result (Chrome)

I have developed a mobile web app that works great with Chrome on Android. Here is a screenshot:

The white bar with Safari

Now I have some issues with other browsers. For instance Safari with iOS 8.3 on an iPhone 5 will display this ugly, plain white column on the right. Preventing <body> to take up the whole viewport's width and triggering the vertical scrollbar:

The empty page with the Android default browser

On the other hand, the "Browser" application that comes with most Android phones won't show what is below the top navbar:

This occurs for Browser 4.2.2 on a Wiko Iggy , but the problem is not present for Internet 2.1.34.1 on a Samsung Galaxy S4 (are "Browser" and "Internet" different applications developed separately? I have no idea.).

Markup

Here is the high level markup of the app. I'm using AngularJS with a yeoman generator and mobile-angular-ui as a UI library.

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    ...
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="no">
    ...
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" media="(min-width: 641px)" href="styles/main.css">
    ...

    <link rel="stylesheet" media="(max-width: 640px)" href="styles/mobile/mainMobile.css">
    ...
    <!-- endbuild -->
  </head>
  <body ng-app="myApp" ng-controller="MainCtrl as MainCtrl">

    <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div ng-view=""></div>
    <div ui-yield-to="modals"></div>

    <!-- build:js(.) scripts/oldieshim.js -->
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.js"></script>
    <![endif]-->
    <!-- endbuild -->

  </body>
</html>

CSS

I have simply no css styling at all for html and body.

I can provide any additional information that you think is relevant to troubleshoot this issue. My first priority is to get the problem solved on iOS.

Buddyshot
  • 1,614
  • 1
  • 17
  • 44
  • Have you tried using the Safari Web Inspector to spot the error? – Guillermo Orellana Ruiz May 22 '15 at 15:53
  • 1
    Normally extra space is incorrect sizing somewhere. I normally approach this by using this CSS rule to find the offending element `*{border:1px solid red;}` If you are on a Mac, you can open an inspector of your iPhone browser by opening Safari on the Mac with your iPhone connect via USB. Go to the Develop menu and then you should see your iPhone. – hopkins-matt May 22 '15 at 15:55
  • I currently have no apple item but I guess investing in such hardware is part of the sacrifice to make if you want to create apps that work on iOS. Proprietary products...love it! – Buddyshot May 22 '15 at 16:05
  • 2
    I would still suggest trying my CSS rule trick. Just add `*{border:1px solid red;}` and you should be able to see what is breaking the width on mobile Safari. – hopkins-matt May 22 '15 at 17:33

2 Answers2

0

There's probably something wrong with your website viewport, the body/html heights or even with "uncleared" floats.

I recommend commenting out piece by piece the UI, so you can easily debug it and find what the problem is.

Nicholas Valbusa
  • 339
  • 1
  • 7
0

I had this exact same problem.

The issue I had was that an element on my page had pixel width of greater than the width of the page.

Counter-intuitively, this resulted in other elements on the page who's width should have been 100% of the page, are re-sized to now extend the entire width of the page. I think this is because the element that was too wide become 100%, and the other elements that should have been 100% were rendered smaller in proportion to the over-sized element.

Example:

  • Too big element: 1000px
  • Device's display is 800px

... now anything that is 1000px will extend the whole length, and anything that is 'width:100%;' will only extend 80% of the page because 800px is 80% of 1000px. ... this is my theory at any rate...

I fixed this by adding "max-width:100%" to all elements that had set pixel width:

.div-class{
     width:1366px;
     max-width:100%;
}
Chris Dutrow
  • 48,402
  • 65
  • 188
  • 258