Safari in iOS8 experiencing problems with -webkit-overflow-scrolling: touch;

Our team has been developing a web app for a client that functioned perfectly on iOS7 in Safari. However, upon testing the app on iOS8, some significant bugs were discovered.

  • After a user opens and closes the sidebar, content within a
    <section style="overlay-y: scroll;"></section>
    disappears (the overlaid portion).
  • Certain buttons ceased to work suddenly. (<a href="">Lala</a>)

We noticed that by removing

-webkit-overflow-scrolling: touch;
from the container (the div containing all the content), everything functioned flawlessly as it did before...

Any insights into what might be causing this issue?

Answer №1

Dealing with the same issue here! Still on the lookout for a solid fix, but there is a temporary workaround available:

If your #container has the

-webkit-overflow-scrolling: touch
property enabled, you can try using this snippet of jQuery:

$('#container').css('-webkit-overflow-scrolling','auto');

Alternatively, in JavaScript (not tested):

document.getElementById('container').style.webkitOverflowScrolling = 'auto';

By doing this, it will eliminate the smooth roulette-style scrolling effect on your page. It may not be perfect, but at least your page should scroll properly now.

Update:

After looking into it further, we found a more unconventional method to address the issue while retaining the smooth touch scrolling functionality. If you currently have

-webkit-overflow-scrolling: touch
defined in your CSS, you can "toggle" it using JavaScript. I'm not certain about your show/hide menu implementation, but hopefully, you can adapt this approach accordingly.

function toggleMenu(){
    $('#container').css('-webkit-overflow-scrolling','auto');

    //...Your existing code

    setTimeout(function() {
        $('#container').css('-webkit-overflow-scrolling','touch');
    },500);
}

In my case, this solution only worked when including the setTimeout function. Hopefully, this insight proves helpful to you or others facing similar challenges.

Answer №2

Encountering issues with iOS8 causing buttons bound to click events to malfunction, resulting in delayed responsiveness or requiring multiple taps for triggering.

An effective solution discovered involves incorporating touchend along with click bindings.

button.on('click touchend', function(event) {
  // this fires twice on touch devices
});

For further discussion on this topic, visit the forum linked below:

JavaScript touchend versus click dilemma

Hopefully, this information proves useful.

Answer №3

Have you tried animating your sidebar using CSS animations?

I encountered a similar issue in a Cordova web application. Through some trial and error, I discovered that the problem stemmed from the parent <div> (the sidebar) being animated with CSS animations while utilizing the property animation-fill-mode: forwards;

The solution was to simply remove this property, which resolved the problem and restored the expected behavior of

-webkit-overflow-scrolling: touch
on the sidebar.

Answer №4

Here is what I recommend:

$('#box').css('-webkit-overflow-scrolling','auto');

The initial suggestion was unsuccessful:

document.getElementById('box').style.webkitOverflowScrolling = 'auto';

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The layout causes issues with responsiveness on the Flask app page

I'm currently in the process of developing a web application and I've implemented a navbar.html file as the layout for each page using the following code: eachpage.html : {% extends 'navbar.html' %} {% block body %} <div class=" ...

Animating drop-right feature in a horizontal navigation menu

I want to design a horizontal menu with an animated effect that activates when hovering over first-level items. Here is the code snippet: .nav { float: right; } .nav ul { list-style: none; padding: 0; margin: 0; } .nav ul li { position: relat ...

The functionality of WebDriver Wait is not functioning as expected

Is there a way to avoid waiting for the entire page to load? I thought using WebDriverWait would help, but I keep getting a TimeoutException even though the tag is visible. self.driver.get('http://www.quoka.de/') self.wait.until(EC.invisibility_ ...

Achieve a stunning visual effect by placing images behind the background using HTML and

I'm currently working on developing a webpage with a slideshow feature. I've decided that I want the transition between images in the slideshow to be a smooth fade effect, going from color to image to color. To achieve this, I have set up a backg ...

The issue of multiple clicks being triggered when opening a dialog box: comparing the trigger and the click events

When I right-click on a jTree list item, a dialog box pops up for editing. The dialog box has a table with a list of items similar to the original one selected. The first time I open the dialog box, the selected item is highlighted and its information popu ...

Whenever I nest my div tags within another div element in an HTML document

Whenever I try to position a div inside another div using float, I encounter problems. <div id="main"> <div id="anotherDiv"> <h1>Test</h1> </div> </div> Here is the corresponding style sheet: #main{ ba ...

Tips on removing previously selected files from a Bootstrap 4 input file

I am currently facing an issue with a form that includes an input file implemented using Bootstrap 4. The functionality of this input file depends on Javascript: when the user clicks on the "browse files" button, a window opens for file selection, and upon ...

I'm looking for assistance on how to set the minimum height using jQuery. Can anyone provide

My attempt to use the minHeight property in one of my divs is not successful, and I am unsure why... <div id="countries"> <div class="fixed"> <div class="country" style="marging-left:0px;"></div> <div class="country"&g ...

When the browser size shrinks, turn off the drop-down navigation menu

I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...

What is the proper way to incorporate an HTML inline tag within a string?

I am trying to incorporate an svg icon that symbolizes the Enter key in my design: <kbd class="DocSearch-Commands-Key"> <svg width="15" height="15" aria-label="Enter key" role="img"> ...

Avoid choosing the menuItem when clicking on the icon within the Material UI select component

I am trying to create a dropdown menu that allows users to delete items. However, when I click on the delete icon within a menu item, the entire menu item gets selected automatically. How can I prevent this default behavior? Here is my code: { dropd ...

Is there a way to pass a variable from a Django view to an HTML page using Ajax when the user presses a key

I am developing an application that delivers real-time data to users in HTML, and I aim to dynamically update the paragraph tag every time a user releases a key. Here is a snippet of my HTML: <form method="POST"> {% csrf_token %} <p id="amount_w ...

Only switch a radio button when the Ajax call results in success

Within an HTML form, I am working with a group of Radio buttons that trigger an Ajax call when the onchange() event is fired. This Ajax call communicates with the server to process the value sent by the call. The response can either be a string of "succes ...

Iterate through each image within a specific div element and showcase the images with a blur effect applied

I have a div with multiple images like this: <div class="am-container" id="am-container"> <a href="#"><img src="images/1.jpg"></img></a> <a href="#"><img src="images/2.jpg"></img>< ...

Shine a light on the input with a captivating outer

Can we replicate the outer glow effect that Safari and other browsers automatically add to an input field without using jQuery? If you want to remove it, check out this article: Thank you! ...

How to obtain the height of the parent screen using an iframe

Imagine a scenario where a div contains an image that is set to perfectly fit the height of the screen. This setup works flawlessly, with one exception - when placed within an iframe, the height of the div adjusts to match the content's height rather ...

What is the best way to remove query string parameters prior to running a function when a button is clicked?

I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...

What is the best way to eliminate excess spacing between HTML td and table elements in Outlook?

Here's the HTML email code snippet. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co ...

Borders are absent on several div elements

There is a strange issue I'm facing where some borders on identical divs are not showing up. I have spent hours trying to troubleshoot this problem, and it seems like zooming in or out sometimes makes the border appear or disappear. My hunch is that i ...

The art of applying styles through styled components

I am attempting to customize the styling of my component with the following code: export const StyledCascader = styled(Cascader)` background-color: gray; ul.ant-cascader-menu { background: red !important; } `; Despite using styled components ...