2

I am thinking this is probably an obscure Google Chrome bug, in short, I have a nav that contains a list split into columns with CSS columns, and elsewhere on the page, an element with a 'flip around' effect implemented using transform rotate3D.

When the combination of the transform and the columns are both active on the page, the click events of the anchors in my navigation do not fire. They do however go through all of their states, including hover and active, they look like they should be clicking, but the user is not navigated away.

There is no JS event.preventDefaulting them.

The elements are no where near each other in either the DOM or the rendered styling.

Inspecting the page confirms the above, even when the transformed element is invisible due to its 3D rotation + backface invisible, the outline projected by inspector shows the element is still nowhere near the broken links.

Unticking either the transform or the columns makes the links work again.

Neither the columns nor the 3D transform are something I can achieve very easily with alternate techniques, the website is highly responsive and both of these are pretty integral to the way it works.

The problem is not present when the transformed element is display none'd, presumably because the transform is ignored in this case.

See my jsFiddle here: CSS transform rotate3D + columns causing unclickable links in columns.

Steve
  • 5,771
  • 4
  • 34
  • 49
  • Any chance you could provide a reduced test case on jsbin/jsfiddle? – Remy Jan 23 '13 at 11:09
  • 1
    Behold the most verbose jsfiddle in all of the land: http://jsfiddle.net/7A85g/ – Steve Jan 23 '13 at 12:06
  • I made some minor adjustments, even more confusingly.. it's MOST of the click events that don't happen, on rare occasions they do seem to fire. http://jsfiddle.net/stevelacey/7A85g/2/ – Steve Jan 23 '13 at 12:50
  • I created a simple jsFiddle [here](http://jsfiddle.net/piraterob/RjppB/) that demonstrates the problem. I'm placing an element with `rotatex` behind some links and it interferes with the ability to click on them. The element is rotated so the top is 'towards' the viewer and the top 50% of the link container is unclickable. You can play with the CSS to rotate the other way and make the bottom half unclickable. Similarly doing `rotatey` will make the left or right half of the link container unclickable. – Rob Fletcher Jan 24 '13 at 16:11
  • Forgot to point out: no such problem in Firefox. Also in my fiddle I'm using -prefix-free but the problem persists if I put the `-webkit-` vendor prefixes directly in the CSS instead so it's not caused by the JS. – Rob Fletcher Jan 24 '13 at 16:18
  • @PirateRob your example however breaks hover and active states on the unclickable links, which mine does not, which makes me question whether it is the same problem? – Steve Jan 30 '13 at 09:07
  • http://stackoverflow.com/questions/15786891/browser-sometimes-ignores-a-jquery-click-event-during-a-css3-transform helped me – nilgun Oct 27 '13 at 11:12

1 Answers1

0

I had a similar issue before while doing this (CSS lines 37 to 42). The solution for me was found here: Mouse up/click event not firing after translateZ

Community
  • 1
  • 1
Remy
  • 1,414
  • 4
  • 20
  • 29
  • This was my first thought too, alas, it is the anchor gets selected, there is some stuff going on with postition and z-indexes, but I think it's unrelated. – Steve Jan 23 '13 at 12:10
  • 1
    I had a similar issue before now that I think about it (while doing this: http://codepen.io/remybach/pen/armbd - CSS lines 37 to 42). The solution for me was found here: http://stackoverflow.com/questions/11764151/mouse-up-click-event-not-firing-after-translatez/13566506#12020643 – Remy Jan 23 '13 at 13:20
  • Yes, amend your answer to include the solution and reference and I will accept it. – Steve Jan 30 '13 at 09:37