CSS: How to keep scrollable & static modal elements in sync on iOS/Safari
<p>A site whose code I inherited brings up a modal when an element on the page is selected, and in Chrome and native Android environments, the behavior is as expected. However, in Safari/iOS the behavior needs to be fixed.</p>

<p>In Safari/iOS, when you drag the modal to scroll, there are a few problems:</p>

<ul>
<li>the close button can lag, exposing some of the content below the scrollable content, esp when swiping down on the content quickly</li>
<li>when dragging up, the content can pull away from the close button and create a gap, only snapping back when lifting your finger (clumsily; the button will disappear momentarily as the content snaps back to its default position and then reappear)</li>
<li>when scrolling down (swiping up) and then quickly scrolling up (swiping down), the close button will attach itself to the content on the elastic rebound, and only then pop back into its desired "static" position</li>
</ul>

<p>I am not attached to the elastic easing, if getting rid of it is the only way to maintain compatibility across environments. </p>

<p>HTML:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;div id="modal"&gt;
    &lt;div id="content"&gt;
      &lt;!-- modal heading + text --&gt;
    &lt;/div&gt;
    &lt;div class="close-button"&gt;
      &lt;a href="#"&gt;Close&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/html&gt;
</code></pre>

<p>CSS:</p>

<pre><code>#modal {
    position:fixed;
    overflow: auto;
    padding: 0 5px 0 5px;
    z-index: 9;
    -webkit-overflow-scrolling: touch;
}

#content {
    z-index: 9999;
}

.close-button {
    padding-top: 10px;
    border-top: 1px solid #999;
    background-color: #fff;
    clear: both;
    height: 30px;
}
</code></pre>