iOS scroll bug

by Aides

HTML

<div class="pageContainer" ng-app="app" ng-controller="appCtrl as ctrl">
  <div class="overlayWrapper">
    <div class="overlay" ng-hide="!ctrl.showDropdown">
    
    </div>
  </div>
  <div class="content">
    <div class="dropdown" ng-class="{ 'open': ctrl.showDropdown }">
      <div class="selected" ng-click="ctrl.toggleDropdown()">
        Option 1
      </div>
      <div class="options" ng-hide="!ctrl.showDropdown">
        <ul>
          <li>Option 1</li>
          <li>Option 2</li>
          <li>Option 3</li>
          <li>Option 4</li>
          <li>Option 5</li>
          <li>Option 6</li>
          <li>Option 7</li>
        </ul>
      </div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sagittis aliquet enim, ut ullamcorper nulla dictum in. Pellentesque elementum mi in orci efficitur, id ultrices velit dapibus. Aenean ac imperdiet tortor. Aenean cursus justo sed rutrum porttitor. Vestibulum sed velit ultrices, facilisis urna eget, viverra sem. Suspendisse quis nunc sed tortor dignissim tempus eget sit amet ante. Proin dictum ex vel leo iaculis hendrerit. Nam sollicitudin urna at quam blandit, in malesuada nisi tempus. Ut laoreet metus enim, malesuada dapibus elit vehicula vitae. Phasellus fermentum, magna iaculis malesuada accumsan, arcu tortor blandit lectus, eu posuere justo lorem eget eros. Curabitur placerat molestie interdum. Suspendisse ac nunc sed sapien ultricies sodales. Mauris non mi velit. Phasellus neque massa, euismod vel mi quis, egestas eleifend ex. Sed aliquam tincidunt lobortis. In nec neque nunc.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed placerat ut metus molestie consequat. Cras interdum tristique augue varius consectetur. Duis cursus justo sit amet sapien gravida tristique. Maecenas non erat nisi. Pellentesque risus justo, dictum a arcu vitae, malesuada maximus enim. Donec pharetra, magna a rutrum congue, metus nunc dictum lorem, eget euismod mauris...

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<style type="text/css">

html, body
{
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.pageContainer
{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #999999;
}

.overlayWrapper
{
  position: fixed;
  z-index: 4;
}

.overlay
{
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 20px;
  left: 0px;
  background-color: rgba(0,0,0,0.5);
  opacity: 1;
  transform: translate3d(0,0,0);
}

.dropdown
{
  position: relative;
  height: 56px;
  width: 100%;
  z-index: 0;
  transition: z-index 0.5s cubic-bezier(1, 0, 1, 0);
}

.dropdown.open
{
  z-index: 5;
  transition: z-index 0.5s cubic-bezier(1, 0, 1, 0);
}

.selected
{
  position: relative;
  height: 56px;
  width: 100%;
  background-color: #fffbd6;
  margin-bottom: 1px;
}

.options
{
  position: relative;
  width: 100%;
  max-height: 196px;
  transform-origin: 50% 0%;
  transform: scale3d(1,1,1);
  z-index: 5;
  opacity: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  transition: all 0.5s;
}

.options.ng-hide
{
  transform: scale3d(1,0,1);
  opacity: 0;
}

.options ul
{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.options li
{
  height: 56px;
  width: 100%;
  background-color: #fffbd6;
  position: relative;
  
}

JavaScript

angular.module('app', [])
.controller('appCtrl', function()
{
	this.showDropdown = false;
  
  this.toggleDropdown = function()
  {
  	this.showDropdown = !this.showDropdown;
    console.log('toggle');
  }
});