CODEWITHSUNDEEP
javascripthtmlsafariabsolute
Rubentje
Rubentje

Reputation: 128

iOS Safari can't scroll content of absolute div when body is touched (delay)

I have a fullscreen menu overlay in my site (absolute). Inside the absolute menu are two other divs. The upper div is a static div which contain the site logo. The lower div contains a scrollable list (overflow-y: auto).

The problem is that when i touch the upper div for a short time (try to scroll in it), the lower div will freeze for a couple of seconds. But when i release my finger from my screen, and 'focus' on the lower div, then it can scroll again.

I think safari on iOS has a delay between a 'focus' change... Is there a way to disable that delay? So that i can immediately scroll the bottom div after i touched the upper one?

I have recreated my code in JSFiddle, but i can't simulate the exact problem on my iPhone when i navigate to the JSFiddle page... https://jsfiddle.net/g87cge1q/4/

<body>
  <div class="navbar">
    <div class="nav-top">
      Top Test

    </div>
    <div class="nav-content">
      <ul>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>    <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
        <li>Menu item</li>
      </ul>
    </div>
  </div>
</body>

div {
  display:block;
  float:left;
}

body {
  width: 100%;
  height: 100%;
  max-height:100%;
  overflow:hidden;
  background-color: green;
  padding:0;
  margin:0;
}

.navbar {
   position:absolute;
   top:0;
   bottom:0;
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow:hidden;
 }

.nav-top {
  width: 100%;
  height: 50px;
  background-color:red;
}

.nav-content {
  width: 100%;
  background-color: yellow;
  height:100%;
  max-height:100%;
  overflow-y:auto;
  overflow-x:hidden
}

.content-to-be-hidden-beneath-the-navbar {
  display:block;
}

Upvotes: 1

Views: 824

Answers (1)

sesamechicken
sesamechicken

Reputation: 1981

You could try the Fastclick lib to see if that helps. It's aim is to rid the browser of the 300ms delay in determining if you're trying to scroll or tap. I've used it in the past with excellent results.

https://ftlabs.github.io/fastclick/

Upvotes: 1

Related Questions