Search code examples
iosangularjsmobile-safariangular-material

md-select causes white screen if clicked after IOS focuses on an input feild


On IOS, if a user clicks inside a text input field (IOS focuses it), then selects done on the keyboard, then clicks on an md-select, the view white screens until the user clicks on the screen. It seems to be in part due to the IOS focus on the initial input field. If you zoom out of that focus before clicking the md-select, the white screen issue does not occur.

    <md-input-container>
      <label for="fname" class="required">First Name</label>
      <!-- user clicks on this, IOS focuses on it -->
      <input type="text" id="fname" required="required" data-ng-model="occupant.fname">
    </md-input-container>

    <md-input-container>
      <!-- user clicks on this after IOS focus on above element, white-screen occurs -->
      <!-- white-screen does not occur if you zoom out of the focus before clicking on this -->
      <md-select data-ng-model="bed.occupants" placeholder="occupants">
          <md-option data-ng-value="occupant" data-ng-repeat="occupant in occupants">
            {{ occupant.fname }}
          </md-option>
      </md-select>
    </md-input-container>

Solution

  • This issue is fixed by adding this meta info to your main html file:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">