Sometimes, the browser may fail to recognize a jQuery click event when a CSS3 transform is applied

There is an issue where click events are sometimes not triggered when an element contains another element being animated with CSS transitions.

To see an example of this problem, check out the test case at http://codepen.io/anon/pen/gbosy

In my layout, I have a set of images with captions that appear on hover and slide down an adjacent element when clicked. Users tend to quickly click through these elements. The problem is more prominent on the live site compared to the codepen example.

In the codepen, about 90% of my clicks register successfully, but when CSS transitions are disabled, all clicks work as expected.

If you have any suggestions or solutions, please share them.

It's worth mentioning that this issue is most noticeable in Chrome, less common in Safari, and even less so in Firefox.

jquerycsscss-transitionsjquery-on

Answer №1

To solve this issue, it is important to disable mouse events in the p elements:

p {
  pointer-events: none;
}

The challenge arises when a click event is triggered by both a mousedown and a mouseup, and if these actions occur at the edge of a transition, the mousedown may be on one element while the mouseup is on another (resulting in no click event being generated).

An alternative approach (although not identical) is to handle the action during mousedown instead of click.

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

implementing jquery typewriter plug-in for a responsive bootstrap image

I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used ...

jqueryhtmlcsstwitter-bootstrap-3jquery-plugins

Passing JSON data from template to view in Django

I'm facing an issue with sending JSON data via AJAX from the template to the view and storing it directly in the database. The problem lies in the data not reaching the view successfully. When I try to insert my JSON data (json_data['x'], js ...

jquerypythonajaxjsondjango

Can you provide step-by-step instructions on how to customize styles with MUI in my application?

I am encountering issues with MUI while attempting to customize the color of my buttons. The two methods I have tried so far have been unsuccessful. For example, Method 1: import React from 'react' import { Typography } from '@mui/material& ...

cssreactjsmaterial-ui

The div with a 'inline-block' display and maximum width appears to be wider than needed after a line break

The red div labeled as inline-block-1 in the jsFiddle takes up more space than needed for the text. Is there a way to eliminate the extra space, making it resemble the green inline-block-2 without removing the max-width and avoiding hard-coding width? Feel ...

jqueryhtmlcss

How to Create a Hover Drop Down Menu that Disappears When Not Hovered Over

When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and ...

htmlcsshovernavbar

Implementing sliders for interactive functionality with an HTML table

I need to implement sorting and sliding features on an HTML table using jQuery. Sorting has already been achieved by utilizing the DataTable.js jQuery library. The challenge now is to incorporate a slider into the table, with all subject columns being scro ...

javascriptjqueryhtmlhtml-tableslider

Show the JSON data retrieved from an AJAX request in an HTML table

After receiving the JSON response below from an AJAX call: {"items":[{"name":"MP 201SPF_1C","productNo":"123","commerceItemQty":1,"price":"$350.00","leaseOrNot":"false"},{"name":"MP 201SPF_1C","productNo":"456","commerceItemQty":4,"price":"$1,400.00","lea ...

jqueryajaxjson

Ways to Enhance jQuery Efficiency in a Broader Sense

Utilizing jQuery functions is a common practice for us. However, there has been talk about its impact on performance. While it is simple to write, understand, and maintain, some say that it is slower compared to using traditional raw JavaScript code. But ...

javascriptjqueryperformanceminify

Error message appearing when attempting to add a product to the cart in Magento using AJAX

Encountering an error with the magento 1.8 ajax cart, stating "product not found" The javascript code I implemented: function setLocationAjax(url,id){ var data = jQuery('#product_addtocart_form').serialize(); data += '& ...

phpjqueryajaxmagento

What is the best method to determine the time difference between two timestamps using JavaScript?

Could you kindly show me how to calculate the difference between two times using JavaScript? I have attempted to find a solution, but I am encountering errors. Here is the code snippet from my fiddle: Visit my jsFiddle var currentTime = new ...

javascriptjquery

Aligning a navigation bar with a hamburger menu in the center

I recently implemented a hamburger menu with some cool animations into my site for mobile devices. Now, I am facing the challenge of centering the menu on desktop screens and it's proving to be tricky. The positioning is off, and traditional methods l ...

javascripthtmlcssresponsive-design

Css flex is not compatible with Safari, iPhone 5, and some mobile web browsers' webviews

All of the following code snippets are written in HTML: <div class="btn-toolbar text-center" role="toolbar"> <a href="#" class="btn btn-success">Link 1</a> <a href="#" class="btn btn-success">Link 11</a> < ...

ioscsswebviewsafariflexbox

Bi-directional Parallax Scrolling

As I work on creating a parallax scrolling site using Scrollorama, I am looking to implement a unique animation. My vision is for the animation to move from top to bottom, pause at the middle of the page, and then reverse back up to the top. The creator ...

jqueryscrolljquery-animateparallaxsmooth-scrolling

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

javascriptjqueryhtmlcss

Issue with deploying responsive background image on Github platform

My responsive background image isn't displaying properly on mobile devices after I deployed my project to Github. Although it appears correctly under the Google Chrome inspect mobile tool, when accessed live on a mobile device, the image covers the ba ...

cssgithubresponsive-designbackground-imagematerialize

What is the best way to eliminate the space between two buttons in a table row or "column"?

Below is the code snippet that I am working with. I am trying to figure out a way to eliminate the space between the buttons both horizontally and vertically. Can someone guide me on how to achieve this? <%@page contentType="text/html" pageEncodin ...

htmlcssbuttonspacing

Ways to retrieve the position of hyperlinks within a div element

<div class="nav"> <a href="#item1">item1</a> <a href="#item2">item2</a> <a href="#item3">item3</a> </div> Looking at the HTML structure provided above, I am seeking to determine the index of the hyp ...

jqueryhtmlindexing

Updating Multiple Divs with jQuery AJAX (Continuous Repeated Refreshing)

I've been trying for a while to solve this issue but haven't found a solution yet. My auto-refresh feature works, however, it refreshes all the divs inside each other. For example, I have a computer-aided dispatch application with sections for av ...

javascriptphpjquerymysqlajax

Issue with custom video plugin functionality on Internet Explorer browser

I designed a custom video plugin that allows me to use shortcodes for videos with a unique format. I implemented a code snippet from jsfiddle to create a prominent play button, which functions smoothly across all browsers except for Internet Explorer. Desp ...

javascriptjquerywordpressinternet-explorerplugins

Adjust the size of a menu by modifying its width

Hey everyone, I recently joined this website and I'm still learning how to code. My current project involves creating an off-canvas menu, but I've come across a few challenges. Firstly, does anyone know how to adjust the width of the menu when it ...

htmlcssmenuoff-canvas-menu