Can't click area after CSS 3D transforms (in Chrome)

[vexpertine]

Hello,

I have a problem of accessibility after 3D rotating. This problem happens only in Chrome.

When I click a Panel link, the header/nav is rotated. It opens a “submenu panel” with links. But after applying this CSS3 transformation, I cannot click on these links. In fact the whole area is not accessible.

I saw posts with similar problems, and tried to modify as mentioned.., but it doesn’t change anything.

Here’s a Fiddle : https://jsfiddle.net/helloducoux/5fvvgmqq/22/

Maybe someone can see the reason ?

Tell me if my code is not clear enough, or if it needs to be reduced.

Thanks in advance for your help ! :)

[Shikkediel]

Looks even weirder on IE… can’t say I have a solution though. Pretty sure the Chrome issue is stacking context related.

[vexpertine]

Oh I didn’t test IE yet..

What do you mean by “Chrome issue is stacking context related” ?
(excuse me my english is not perfect).

[Shikkediel]

When you use a transform on an element, it creates it’s own stacking context – in short the layering of the child elements. It’s only a hunch that this is interfering with the z-index of the so the p element since this ends up being on top. I wouldn’t want to send you on a wild goose chase with this though. Admittedly I don’t yet get the whole concept myself.

[Shikkediel]

Looks like an old bug, this one:

http://stackoverflow.com/q/5472802/3168107

[vexpertine]

Thank you Shikkediel for your help.

I’ve tryed some modifications according to the elements you sent me, but it doesn’t change.

I have edited my Fiddle with much less code : https://jsfiddle.net/helloducoux/11rnh4ry/2/

Easier to read, maybe it could help ?
I’m totally blocked..

[Shikkediel]

I’ve been looking at it for quite a while but can’t find a solution. I probably lack the proper insight on stacking contexts. Compared to Firefox, #header-desktop seems to lose it’s z-index because of the transform.

[Author]

Posts