After the CSS3 transformation, a click event does not follow

Encountering an issue with Chrome/Safari browsers. Following the application of CSS3 transformation, the mouseup and click events are not being triggered (though they work fine in IE9/10).

Here is an example of the non-functional code:

<script type="text/javascript">
    $(".box").mousedown(function (e) {
        $(this).addClass('transform');
    });

    $(".box").mouseup(function (e) {
        $(this).removeClass('transform');
    });

    $(".box").click(function (e) {
        alert("Click"); // Issue persists in Chrome/Safari
    });
</script>

<div class="box"></div>

along with CSS3 styling:

.box {
    background-color:#f00;
    width:200px;
    height:200px;
}

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(10deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(10deg);
    -webkit-transform-origin: 0% 50%;
    -webkit-transform: rotateY(10deg);
}

Answer №1

The issue arises from the fact that the position:absolute was not set:

.transform {
    transform-origin: 0% 50%;
    transform: rotateY(30deg);
    -ms-transform-origin: 0% 50%;
    -ms-transform: rotateY(30deg);
    -webkit-transform-origin: 0% 50% 0px;
    -webkit-transform: rotateY(-31deg);
}​

View the Updated Demo here

For more information on transformations, you can refer to the following links:

Answer №2

There seems to be an issue with the browser bug in webkit. Make sure to be extra cautious in avoiding any z-transform to ensure the clicks function properly.

Interestingly, Firefox and IE can still process the clicks even with the z-transform present.

While using position:absolute may be a temporary workaround for some, it is not the ideal solution for a browser malfunction.

Answer №3

There could be a couple of reasons why this issue is occurring. One possibility is that the position:absolute property needs to be set on a parent element.

Another reason for this issue could be a bug in webkit (and possibly other browsers) where a transformZ value is calculated randomly for a transformed face. To fix this, you can add the following code:

-webkit-transform:translateZ(0px);
-moz-transform:translateZ(0px);
transform:translateZ(0px);

This solution worked for me when dealing with interactivity issues on a div element that had nested child elements and was causing click feedback problems at different angles. I was able to identify the issue by moving one of the child elements beyond the edge of the parent element, revealing that the parent element was invisible obscuring the child element.

It's important to note that this fix also resolved other Z-depth problems with subsequent child elements, which should not have been present initially. This indicates a possible rendering bug that may potentially be affected by future browser updates as developers adjust the rendering processes.

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

Tips for updating mysql records on a web page without the need to refresh it using PHP

Consider this situation: Below is the code that shows all user accounts. <table border="3px" align="center" cellspacing="3px" cellpadding="3px"> <tr> <td>Username</td> <td>Password</td> <td><a href="" oncli ...

Assigning a specific data type value to an element as it enters the top of the viewport

I have a unique color code stored for each section, and when a section reaches the top of the screen (specifically -180px for the header), I want to dynamically change the text color of the header element as you scroll through the sections. Despite no erro ...

What is the best way to click on a specific webElement in a group of webElements using Python Selenium?

After discovering how to locate a subelement of an element using Selenium in python through this informative Stack Overflow post, I am now eager to take my skills to the next level. Selenium Get WebElement inside a WebElement My goal is to be able to exe ...

Connect an ajax request to a link_to tag

I am looking to implement AJAX functionality to update the number of likes on my "ideas" page when a user clicks the like button. The current implementation in the ideas#show view directs to likes#create without using ajax. The button display code is as f ...

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

Sending HTML input data to jQuery form field

Is there a way to pass HTML text input values into a Stripe form? Here is an example of what I currently have: <input type="text" name="trip" id="trip" value=""> JS: (part of the form) .append(jQuery('<input>', { 'nam ...

How can I make rows appear dynamically when the user clicks a button?

I am trying to add rows dynamically when the user clicks on a button. I have created a script for this purpose, but unfortunately, it is not working as expected. Can someone please assist me with fixing it? <script> var i; i = 2; function AddR ...

Using the Google Picker API to dynamically load a file picker when needed

I am interested in integrating the Google Picker API. The provided example demonstrates the picker being loaded upon page load, but I would like the picker to load when a specific action is taken, such as clicking on a button. However, implementing this be ...

Issues with displaying AJAX Bootstrap Modals

I'm struggling to display a Bootstrap modal with dynamically generated content from the database. The data is not showing up in the modal body, and I've been troubleshooting this issue for quite some time now. Modal <div class="modal fade" i ...

Simple authentication with ExpressJS, integrated with MongoDB and AJAX technology

I'm developing a simple Express login feature where a user can enter an existing username from MongoDB into a prompt: HTML code that is not directly related to the issue: <a href="#home" class="login"><span class="fontawesome-circle">< ...

What steps are involved in setting up a single form for entering orders, complete with both an order table and an order_item table that incorporates a foreign key

As I contemplate the best way to structure my page and forms for a customer ordering process, a few questions arise due to the tables' organization. To adhere to normalization standards, I have separated the order table and the order items table, link ...

Ajax is encountering issues retrieving the content

I'm a beginner when it comes to working with ajax. I attempted to compile this simple code, but for some reason it's not fetching the contents of the file. This is the code I'm using: <!DOCTYPE html> <html> <head> <scr ...

Prevent form submission: Attempted to stop it using `e.preventDefault()` following a `$post` function, however it resulted in

I encountered an issue with my JavaScript code $('#submit').on('click', function(e) { $('#message_line').text(""); if(validate_fields_on_submit()) { e.preventDefault(); return; ...

Scrolling animations tailored to the navbar using jQuery

My fixed header contains a few links, and I've written some code that almost works perfectly. The issue is that there's a delay when the second function is executed. While it successfully scrolls to the top of the page when the linked element is ...

Cross domain Ajax POST requests using CodeIgniter and AjaxBy utilizing CodeIgn

Initially, I would like to clarify ... I own two domains: www.one.com and www.two.com The first domain www.one.com has a form input below <div class="hidden cswrap2"> <h3>Edit Data Mustahik</h3> <div class="cscontent"> ...

What is the best way to ensure the default style is applied when validating?

input { background: white; color: white; } input:in-range { background: green; color: white; } input:out-of-range { background: red; color: white; } <h3> CSS range validation </h3> Enter your age <input type="number" min="1" max= ...

Using animation in CSS is limited to only one time

My goal is to create a pulse animation that triggers when a button is clicked. This image shows the animation midway: https://i.stack.imgur.com/EHDqs.png When the button is clicked, the animation plays once and then stops. However, I want the animation to ...

Can you provide a database of words for different cities, towns, and countries in MongoDB (or in JSON

Currently, I am in the process of developing an application that utilizes MongoDB. One specific feature I am working on implementing is an 'auto-suggest' functionality on the front-end. For example, as a user begins to type the first few letters ...

What is the best way to detect and handle the destroy event in Kendo UI grids when a click event

How can I trigger a function when the delete button in a grid is clicked using JavaScript? ...

What is the best way to use ajax to send a specific input value to a database from a pool of multiple input values

Welcome everyone! I'm diving into the world of creating a simple inventory ordering site, but am facing a roadblock with a particular issue: Imagine you have a certain number (n) of items in your inventory. Based on this number, I want to run a &apos ...