Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Question

Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Overview

This specific issue pertains to a potential freeze that occurs when scrolling through a <ul /> element that has been styled using CSS, specifically with the property

-webkit-overflow-scrolling: touch

on the Safari browser of iOS.

HTML and CSS Setup

I have provided the index.html file along with index.css, both of which were tested on the latest iPad model.

index.html
- Download index.html
index.css
- Download index.css

These files are quite simple, with index.html containing a single <ul /> list with 50 items, enclosed within a

<div class="container">

.

Identifying the Issue

To recreate the issue, you can follow these steps:

Scroll down the list until reaching the bottom
Once the side bar disappears, attempt to scroll further downwards
Then, try moving your finger in the opposite direction to go back up
Notice that the initial upward movement of your finger may not respond
After a few moments, you should be able to scroll back to the top

To better illustrate this issue, I have uploaded a video on YouTube showcasing the problem on an iPad:

Check out the video demonstrating the issue
View the YouTube video here

Specifically, the problematic step 4 from the above procedure can be seen around the 8-second mark in the video.

Please note that the iPad used in the video:

iPad 9.7inch (latest model)
iOS 10.3.2
Running Safari browser

Seeking Solutions

Could you kindly assist me in answering the following questions:

Why is step 4 of the procedure experiencing issues?
How can I adjust the HTML or CSS to improve smooth scrolling of the list?

Sample Code

You can access the sample code used in the YouTube video on GitHub.
Here is the link to the repository:

GitHub Repository Link

Please note that this sample program requires Node.js to run the server.

Thank you for your assistance.

html ios css mobile-safari

Answer 1

Answer №1

If you're looking to work around the scroll lock issue, one potential solution is to trigger a minimal scroll movement of one pixel when the list reaches the top or bottom.

Take a look at this simple example:

PS Another option to address this could involve utilizing overscroll-behavior, but this method is dependent on iOS 16.

const list = document.querySelector('.list');

list.addEventListener('scroll', onePxHack, { passive: false })

function onePxHack(e) {
  const { currentTarget: list } = e
  const atTop = list.scrollTop === 0;
  const atBot = list.scrollHeight - list.scrollTop === list.offsetHeight;
  if (atTop || atBot) {
    list.scrollTop += atTop ? 1 : -1;
    e.preventDefault();
  }
}

.container {
  background-color: #DDD;
  width: 300px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 50px;
  margin-left: 50px;
}

.list {
  height: 500px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 24pt;
  padding: 0;
  margin: 0;
}

.list>li {
  list-style-type: none;
}

<div class="container">
  <ul class="list">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
    <li>009</li>
    <li>010</li>
    <li>011</li>
    <li>012</li>
    <li>013</li>
    <li>014</li>
    <li>015</li>
    <li>016</li>
    <li>017</li>
    <li>018</li>
    <li>019</li>
    <li>020</li>
    <li>021</li>
    <li>022</li>
    <li>023</li>
    <li>024</li>
    <li>025</li>
    <li>026</li>
    <li>027</li>
    <li>028</li>
    <li>029</li>
    <li>030</li>
    <li>031</li>
    <li>032</li>
    <li>033</li>
    <li>034</li>
    <li>035</li>
    <li>036</li>
    <li>037</li>
    <li>038</li>
    <li>039</li>
    <li>040</li>
    <li>041</li>
    <li>042</li>
    <li>043</li>
    <li>044</li>
    <li>045</li>
    <li>046</li>
    <li>047</li>
    <li>048</li>
    <li>049</li>
    <li>050</li>
  </ul>
</div>

Answer 2

If you're looking to work around the scroll lock issue, one potential solution is to trigger a minimal scroll movement of one pixel when the list reaches the top or bottom.

Take a look at this simple example:

PS Another option to address this could involve utilizing overscroll-behavior, but this method is dependent on iOS 16.

const list = document.querySelector('.list');

list.addEventListener('scroll', onePxHack, { passive: false })

function onePxHack(e) {
  const { currentTarget: list } = e
  const atTop = list.scrollTop === 0;
  const atBot = list.scrollHeight - list.scrollTop === list.offsetHeight;
  if (atTop || atBot) {
    list.scrollTop += atTop ? 1 : -1;
    e.preventDefault();
  }
}

.container {
  background-color: #DDD;
  width: 300px;
  height: 500px;
  position: fixed;
  top: 0;
  left: 0;
  margin-top: 50px;
  margin-left: 50px;
}

.list {
  height: 500px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 24pt;
  padding: 0;
  margin: 0;
}

.list>li {
  list-style-type: none;
}

<div class="container">
  <ul class="list">
    <li>001</li>
    <li>002</li>
    <li>003</li>
    <li>004</li>
    <li>005</li>
    <li>006</li>
    <li>007</li>
    <li>008</li>
    <li>009</li>
    <li>010</li>
    <li>011</li>
    <li>012</li>
    <li>013</li>
    <li>014</li>
    <li>015</li>
    <li>016</li>
    <li>017</li>
    <li>018</li>
    <li>019</li>
    <li>020</li>
    <li>021</li>
    <li>022</li>
    <li>023</li>
    <li>024</li>
    <li>025</li>
    <li>026</li>
    <li>027</li>
    <li>028</li>
    <li>029</li>
    <li>030</li>
    <li>031</li>
    <li>032</li>
    <li>033</li>
    <li>034</li>
    <li>035</li>
    <li>036</li>
    <li>037</li>
    <li>038</li>
    <li>039</li>
    <li>040</li>
    <li>041</li>
    <li>042</li>
    <li>043</li>
    <li>044</li>
    <li>045</li>
    <li>046</li>
    <li>047</li>
    <li>048</li>
    <li>049</li>
    <li>050</li>
  </ul>
</div>

Answer 3

Answer №2

One workaround for this problem involves utilizing the body's scroll. However, this solution is only applicable to specific scenarios.

Answer 4

One workaround for this problem involves utilizing the body's scroll. However, this solution is only applicable to specific scenarios.

Answer 5

Answer №3

Customize your CSS styling

overflow: hidden;

Alternatively,

overflow: auto;

Implement CSS @media queries to adapt to various screen sizes

Answer 6

Customize your CSS styling

overflow: hidden;

Alternatively,

overflow: auto;

Implement CSS @media queries to adapt to various screen sizes

Answer 7

Answer №4

Implement @media rules to adjust content for different screen sizes. Here is an example:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}


@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Answer 8

Implement @media rules to adjust content for different screen sizes. Here is an example:

@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}


@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Encountering iOS 10 freezing issues when scrolling through an HTML list that is styled with -webkit-overflow-scrolling: touch

Overview

Related Problems

HTML and CSS Setup

Identifying the Issue

Seeking Solutions

Sample Code

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Styling text and images with Bootstrap

Having trouble retrieving the value of a textarea within a jQuery UI dialog box

What is causing the classList function to throw an error: Uncaught TypeError: Cannot read properties of undefined (reading 'classList')?

Exploring intricate designs using HTML and Javascript

Is there a way to format a block of text so that right-to-left text aligns to the right, while left-to-right text aligns

Is it possible to include the contents of an .ics file and provide a link to it in HTML, all without relying on JavaScript?

Utilizing Ajax and Jquery to dynamically adjust CSS properties, dependent on data from a specific MySQL row

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

How can we programmatically trigger a click action on an element obtained through an HTTP request with the help of Set

What could be causing my ng-grid footer to refuse to align with the bottom border?

Utilize jQuery to apply a border and background color to a table row when hovering over it

jQuery Summation: A Step-by-Step Guide

How to Align Title in the Center of a Section Containing Multiple Images?

AngularJS Filter from "start to finish" in values

`Cannot locate the CSS file on my local server`

Steps to turn off a Material UI CSS class for an element universally

Perform an AJAX request to an encrypted URL with an unverified certificate

Error encountered during the compilation of Kivy for iOS - Python recipe not found

Create a footer with a centered column orientation

Redirecting and styling following an HTTP post operation