Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events.

Interestingly, the web app functions perfectly on older iOS versions without any problems.

The problem arises when I include the jquery.touchSwipe plugin in my web app - the "on click" events stop working, and even the usage of "-webkit-touch-callout: none;" does not prevent divs from being selectable (which is not the desired behavior). However, the swipe function from jquery.touchSwipe continues to work as expected.

If I remove the jquery.touchSwipe plugin, all my "on click" events work seamlessly.

Below is a snippet of the HTML code for reference:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>Jh Portfolio | mobile</title>

  <link rel="apple-touch-icon" sizes="57x57" href="jh_logo57.png" />
  
  <!-- More stylesheet links -->

<script src="preloader.js" type="text/javascript"></script>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.viewport.js" type="text/javascript"></script>
<script type="text/javascript" src="iscroll.js"></script>
<script src="jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="jhmobile.js" type="text/javascript"></script>
<!-- Additional script sources -->

</body>
</html>

Additionally, here are the CSS properties applied to the button ("div id="btn_bottom"):

#btn_bottom {
   margin: auto;
   position: relative;
   margin-top: -191px;
   height: 191px;
   width: 229px;
   clear:both;
   opacity:1;
   z-index:101;
   -webkit-touch-callout: none;
   -ms-touch-action: none;
   cursor: pointer;
} 

In summary:

  • The .html file has been successfully validated as HTML5 by W3C.
  • I am using the latest versions of jQuery and jquery.touchSwipe.
  • The swiping functionality from jquery.touchSwipe is functional.
  • All functionalities, including swiping and button clicks, perform well on desktop browsers and older iOS versions.

Any insights or suggestions on why the buttons become unresponsive when combining touchSwipe with other scripts under iOS7 would be greatly appreciated.

Thank you!

Answer №1

To those encountering a similar issue, let me share the most effective resolution I came across: transitioning to the touchWipe plugin as opposed to touchswipe.

The drawback of touchWipe is its lack of compatibility with desktop browsers; however, given my focus on mobile usage for this effect, it suits my needs perfectly.

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

I find myself facing a roadblock in navigating Servlets and HTML

I'm currently immersed in a project aimed at launching an innovative online food ordering platform. To bring this vision to life, I've harnessed the power of HTML, CSS, and JavaScript for frontend development, Java (Servlets) for backend function ...

convert an array of hexadecimal colors into an array of RGB colors

I am trying to convert an array of hex colors to RGB values using a custom function. The array looks like this: var hexColors = [ "#ffffff", "#ffffff", "#ffffff", "#f3f3f3", "#f3f3f3", "#f3f3f3"]; The desired output is: var rgbCo ...

Utilize Javascript/Jquery to categorize JSON data based on the days of the week (Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday)

A function is provided below that retrieves data for a chart. The output produced by this function is structured as follows: [Object { date=Date, value=112, volume=1469}, Object { date=Date, value=124, volume=539}, Object { date=Date, value=114, vo ...

Widget for navigating through Youtube videos

I am currently working on creating a widget that allows users to navigate a YouTube video using buttons. For instance, if the video is of a car race, there would be buttons labeled Lap 1, Lap 2, and so forth. My idea involves adding an extension to the vi ...

Utilizing jQuery to establish various AJAX requests through functions on page load and button click

Utilizing a basic ajax call both on page load and click events, where I have defined separate functions for each. Despite using different URLs and parameters in the function, the JSON data from the previous call is still being displayed when clicked. Bel ...

Is there a problem with Chrome's display?

I'm currently using Chrome version 53.0.2785.143 and have noticed a rendering issue that tends to occur more frequently within my application when utilizing CSS transform scale. Feel free to check out this JSFiddle link which demonstrates the problem ...

Changing the animation associated with a hover action - tips and tricks!

My navigation header includes links to various websites, some of which are displayed as drop-down menus. I have implemented an animation and style change on hover to visually indicate the active link and display all available options in case of a dropdown ...

Creating optimized CSS builds for Next.js production

In dev mode, I have separate Custom CSS files for different layouts which work fine. However, when I publish my app in production mode, Nextjs combines all the CSS files together causing issues with my layouts. ...

There was an issue encountered when trying to call a PHP file within an HTML table using Ajax and data.html

For a small project, I have various news items that need to be included from the "news_all.php" file into table data within the "dashboard.php" file. Due to the predefined root structure restrictions, using include('news.php') is not an option. I ...

Display Partial Sliding Content using jQuery

One of the requirements I have is to display a portion of an element by default (let's say 100px), and then reveal the rest of it upon clicking a link. After searching for a solution, I came across a helpful resource on this website. The code provided ...

The dark mode class in Next.js/React does not take effect until a local change is made

I've been diving into a helpful tutorial on implementing dark mode toggle in my project. The tutorial uses react-toggle and can be found here. Everything seems to be working fine except for one issue that arises on the initial page load. When the bro ...

Creating a dynamic multi-item carousel with Materialize (CSS) cards using data from a loop - here's how!

Using a for loop, the following code generates a list of cards. These cards are intended to be displayed in a carousel with 4 cards visible at once, and a next arrow button allows users to navigate through the next set of 4 cards. Materialize cards have ...

Modify the classname of two element class i

I am trying to change the class on click within an <i> element that has 2 classes. The first class is always "fa" and the second class can be either "fa-minus" or "fa-plus". I need to toggle between "minus" and "plus" based on the current class. Ca ...

`Unaligned headers`

Encountering an issue with jQuery DataTables where the header of the table is not aligned properly with the body when the table has a horizontal scroll bar and the width is increased. Here is the original datatable without resizing: And here is the datat ...

Extract words with specified tags from HTML using Python and return them as a list

Is there a simple way to parse HTML, extract the text, and generate a list of tags associated with each word or snippet of text? For instance, in the given HTML code: <em>Blah blah blah</em> blah again <i>and then again</i> The de ...

The Google Maps feature is not appearing on the webpage as expected

I'm currently working on a website that features a footer with a Google Map. The homepage displays this footer without any issues: However, in other pages, I've implemented the footer by calling it from an external file using jQuery as shown bel ...

Opposite of $.param function for PHP

Is there a PHP function that can convert a string, previously generated by jQuery's $.param, back into an array or nested array? In my case, I am sending a JavaScript object after using $.param(): {"categories": [90000]} This string is then read on ...

Formatting issue with selecting checkboxes in Primefaces DataTable filter menu

I decided to replicate the Primeface showcase for filters on my Local JBoss installation by referring to the link provided below: http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml. However, I encountered an issue where my selectCheckboxMenu ...

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

Selenium Alert: Inaccessible Element Encounter (cookie and other pop-up)

I'm attempting to click a button using Selenium so that I can inspect the full HTML of a website. Here's the code I've written: driver = webdriver.Chrome() driver.get('https://www.quattroruote.it/listino/audi/a4-allroad') time.slee ...