How transform-style made links unreachable on my website

Posted on  • tagged with 

I discovered some nested links weren't working on my site. After sifting through each page, I finally noticed that there was a CSS rule applying transform-style: preserve-3d to the entire home page instead of only the element that needed it, which caused unexpected rendering of nested links.

How to spot this?

I only noticed this behavior happening on Firefox, but the warning signs could probably be applied to all browsers.

Why did this happen? Essentially, I had applied transform-style to all the elements on the page with:

-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;

and this caused nested content to be rendered in a way where the top-level parent container appeared "above" or at the top of some stacking context (not z-index, but how nested elements are rendered in 3D space). Thus covering and essentially rendering the nested links useless as they couldn't be interacted with.

I'd recommend not applying transform-style to the whole page like I mistakenly had done, unless you are keeping track or defining how all nested elements are rendered in 3D space.

The Fix

The resolution was simply applying the transform-style to only the elements on the page that needed it, instead of applying it to the whole page. In my case, there was a single element (3D cube CSS drawing) that required transform-style: preserved-3d;, after updating the selectors to only target the cube drawing, all my nested links started working again.

If you ever find yourself in a situation where nested links aren't rendering in the browser as expected, try looking for a transform-style declaration in the CSS as that could be what's causing rendering issues with nested links.

Table of contents