When implementing jQuery for scrolling on a website, touch gestures may become unresponsive on Safari for iOS devices

While developing a custom website with Angular, I encountered an issue specifically with Safari on iOS. The website is a single-page app with multiple menu sections that trigger a scroll animation when selected using jQuery. Everything was working smoothly on all browsers and platforms except for Safari on iPhone. After changing page sections and initiating the scroll animation, all touch gestures mysteriously stopped functioning on the site. The only way to restore touch gestures was by tapping the Safari address bar or double-tapping anywhere on the screen. This problem did not occur on any desktop browsers or other mobile browsers apart from Safari.

After testing on the Mac iOS simulator, I discovered that the scrolling behavior when toggling between page sections caused the issue. By disabling the scroll animation on mobile devices, the problem vanished:

 if(window.innerWidth < 768){
  //for mobile
  //disable scroll animation
  document.body.scrollTop = scrollPos;
}
else{
  //use jquery for smooth scrolling on desktop
  $([document.documentElement, document.body]).animate({
    scrollTop: scrollPos
  }, 500);
}

Although I found a workaround, it is not the ideal solution. Additionally, it does not provide an explanation as to why using jQuery to scroll the site results in broken touch gestures on iOS Safari. Any insights on this issue would be greatly appreciated.

For those interested, you can view the website at: www.everythinggoods.studio

javascripthtmljquerycssios

Answer №1

Upon investigating, I believe I have identified the root of the problem:

$([document.documentElement, document.body]).animate({
    scrollTop: scrollPos
  }, 500);

The corrected version is as follows:

$(document.body).animate({
    scrollTop: scrollPos
  }, 500);

By removing document.documentElement from the elements list to be scrolled, the issue has been resolved. Although the reason behind this causing tap gestures to fail only on Safari iOS remains unclear, the important thing is that the problem has been fixed. The fix has now been implemented and can be accessed here: www.everythinggoods.studio

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

Transform gradient backgrounds as the mouse moves

I'm attempting to create a unique gradient effect based on the cursor position. The code below successfully changes the background color of the document body using $(document.body).css('background','rgb('+rgb.join(',')+&a ...

javascriptjquerygradientlinear-gradients

The Ajax request fails to pass the value to the controller

I've spent the entire day debugging this method and I'm in need of some assistance. My goal is to make an API request and for each array it returns, I want to send a post request to my controller method. However, despite console.log showing the c ...

jqueryajaxpost.net-4.5

Saving data in multiple collections using MongoDB and Node.js: A comprehensive guide

In a recent project of mine, I have implemented a combination of nodeJS and mongodb. My main goal is to store data in multiple collections using just one save button. Below is the code snippet that I am currently working with: var lastInsertId; loginDat ...

javascriptnode.jsdatabasemongodbexpress

Attempting to modify the array content using useState, but unfortunately, it is not functioning as expected

Starting out with react.js and trying to update an array's content using useState upon clicking a send-button, but it's not working as expected. Struggling with adding date and number in the row. Check image here Here's what I'm aiming ...

javascriptarraysreactjsuse-state

The information in the table is spilling out beyond the boundaries

I'm facing an issue with my bootstrap table where if a field value is too long, the table extends past the container length. I tried using responsive-table to prevent this, but then a scroll bar appears at the bottom, making it difficult to view the d ...

htmlcssasp.net-mvctwitter-bootstrapdatatables

why are the subtitles in my uitableview cell rows repeating?

I'm currently working with a uitableview that has two sections: The first section is retrieved from core data The other section is added through a textfield and stored in an NSMutableArray named otherFriends Below is the code snippet: - (NSInteger ...

iosobjective-cuitableview

The dynamic import() syntax is not compatible with the target environment, preventing the use of external type 'module' in a script

I am currently facing an issue with my React app. The command npm start is working as expected, but when I try to run npm run build, it keeps failing. It's crucial for me to run npm run build in order to deploy the app on a website. I have already sp ...

javascriptreactjswebpackimportdynamic-import

The cakePHP time dropdown feature lacks customization options

When viewing my form in CakePHP, I noticed that the time select dropdown appears differently in Chrome compared to Firefox. In Firefox, there are 3 arrow buttons attached to each dropdown, whereas in Chrome it looks different. I want to hide the arrow but ...

csscakephptime

Altering the Size of Text in HTML

Currently I am working on my website and the title appears as follows <h1><font face="tempus sans itc" color="White"><div style="text-align:center">Welcome To My Website. View My Projects Here</h1></div> Is there a way to in ...

html

The issue of anchors with jQuery.ajax()

Hello everyone, I'm encountering an issue with anchors and dynamic content loaded through $.ajax(). Take a look at my jQuery code: $("a.false").live("click", function() { var data = $(this).attr("href"); $("div#text").hide("fast"); $("di ...

ajaxjqueryanchor

Price and advantage in a single line of HTML code

Is there a valid reason for creating one-line HTML? Or is it better not to? I understand that reducing file size is a benefit, but we also need to consider the cost on the server of adding functions to generate one line HTML. Additionally, making changes ...

htmloptimization

Error: props.addPost does not exist as a function

Help Needed with React Error: props.addPost is not a function. I am trying to add a new post in my app. Please assist me. import React from "react"; import classes from "./MyPosts.module.css"; import { Post } from "./Post/Post.jsx& ...

javascriptreactjsmacostypeerrorsingle-page-application

Show the Table and Conceal the Overflow

Currently, I am experimenting with creating an Img hover for entertainment purposes. However, I have added some text to my div. In order to center the text beautifully within my div, I utilized the following CSS code: display: table-cell; vertical-align: ...

htmlcssoverflowvertical-alignment

Removing a Row from a UITableView with a Custom Cell

I am trying to implement a feature in my tableview where each custom cell contains a button that, when clicked, deletes the corresponding row and updates the main view with the new array of data. The initial array is fetched from userDefaults upon loading ...

iosobjective-cuitableviewnsuserdefaults

Unable to eliminate top margin in Bootstrap 3 affix feature

Struggling to locate the source of the margin-top when utilizing the affix plugin on my Navbar. You can view [my website here] for better understanding. Should I be implementing Javascript to solve this issue? My current skills in that area are not very ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

How can I achieve a smooth opacity transition without using jQuery?

Although I understand that JQuery offers functions for this purpose, I am interested in finding a solution using only pure javascript. Is there a way to change the CSS opacity setting over time? Perhaps utilizing a unix time stamp with millisecond precisi ...

javascriptjquerycss

Updating votes on the client side in WebForms can be achieved by following these steps

I am currently working on implementing a voting system similar to Stack Overflow's. Each item has a vote button next to it, and I have it functioning server side causing a delay in reloading the data. Here is the current flow: Clicking the vote butt ...

javascriptjqueryasp.netajaxwebforms

Can a variable be initialized with a concealed or additional argument?

After just 2 weeks of coding, I'm struggling to find information on how to initialize a variable with an extra argument in a recursive function call. Is this even possible? And if it is, are there any scenarios where it's considered best practice ...

javascriptrecursionmethodsarguments

Tips for Handling JQuery .get() Response

After coming across a helpful suggestion on manipulating AJAX response data with jQuery from this website, I attempted to apply it to my own project. Unfortunately, despite trying to make changes to the object using a jQuery .get() method, I found myself u ...

phpjqueryajax

Assistance needed in resolving issues with integrating Model file into View Controller to ensure proper functionality of

I recently created a Model file for my new app and now I'm working on integrating the model with the user interface. The model requires 3 manual inputs and includes a text area where the "results" will be displayed once the calculate button is pressed ...

iosswiftuser-interface