Home/ Questions/Q 7932557
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T21:03:25+00:00

I’ve recently been developing a micro-site that uses some of the newer 3D effects

  • 0

I’ve recently been developing a micro-site that uses some of the newer 3D effects transforms in CSS3. However, I’ve been trying to get a little too tricky with layering so that certain optical illusions take effect and it’s been the cause of numerous headaches…

In general, there’s this issue in Chrome (but not Firefox, haven’t yet tried Safari or IE) where everything seems to “render” appropriately onscreen, but when I go to click a link or highlight some text in one of the more “tricky-layered” areas, my cursor goes limp and I’m unable to get any functionality. I can see everything just fine, it’s just there’s an invisible wall preventing my cursor from interacting, if that helps the explanation.

Without pasting a mile-long piece of experimental code, does anyone know off the top of their head what might be causing this issue? My best guess is that the z-index inheritance has gone awry at some point but it’s difficult to diagnose… leading to my next question of whether or not anyone knows of any good strategies for layering diagnostics (tools would be great here as well)!

I’m of course well-versed in the standard Developer Tools/Firebug…

Thanks guys!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, so I solved my problem and came up with the following strategy for future reference in diagnosing layering issues…

    1. Check discreet Z-Index values of all elements that may be interfering with one another. Re-order them if necessary and see if that solves the problem. If not, move on.
    2. Check discreet positioning on all elements from step 1. Make sure they are declared to either have “position: absolute” or “position: relative” in CSS markup. DO NOT RELY ON INHERITANCE/DEFAULTS. ABSOLUTE DECLARATION IS KEY.
    3. Check your “backface-visibility” values. If your setup is complex, it’s easy to lose track of what’s what.

    Following that pattern is what finally did it for me. My problems turned out to be a combination of all 3 but they didn’t necessarily reveal themselves to me until I followed the steps above.

    • 0