StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy are clicks not firing on anchors in a CSS columned list when rotate3d transforms are applied elsewhere?
text
Body
copied!<p>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.</p> <p>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.</p> <p>There is no JS event.preventDefaulting them.</p> <p>The elements are no where near each other in either the DOM or the rendered styling.</p> <p>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.</p> <p>Unticking either the transform or the columns makes the links work again.</p> <p>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.</p> <p>The problem is not present when the transformed element is display none'd, presumably because the transform is ignored in this case.</p> <hr> <p>See my jsFiddle here: <a href="http://bit.ly/VZOCTT" rel="nofollow">CSS transform rotate3D + columns causing unclickable links in columns</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload