1

Have a curious issue with my footer links in chrome.

http://www.kfc-uerdingen.de/

Firefox has no problem displaying the links in the footer. However in chrome only the ones in the first column are clickable.

Before that I had another issue with chrome where all but the last columns disappeared as soon as there were more than two, but I solved that by adding the footerContainerInner-div, which took over the column related css.

It's not a z-index issue from what I can tell.

Has anybody encountered this before of can see what's going on?

asto
  • 197
  • 2
  • 17
  • lease add meaningful code and a problem description here. Don't just link to the site that needs fixing - otherwise, this question will lose any value to future visitors once the problem is solved or if the site you're linking to is inaccessible. Posting a [Minimal, Complete, and Verifiable example (MCVE)](http://stackoverflow.com/help/mcve) that demonstrates your problem would help you get better answers. For more info, see [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackexchange.com/questions/125997/) Thanks! – j08691 Nov 16 '15 at 20:20
  • the transform: rotate (2deg) is throwing it off. Not sure why, but when I inspect element and uncheck that, the links work fine. This answer may help: http://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate – deebs Nov 16 '15 at 21:00

2 Answers2

2

One solution is to avoid nesting transforms. Instead, you can use transform: rotate(-2deg) skew(-2deg) on #footerContainer.

Transforming an element modify its stacking context; it seems chrome doesn't handle it very well when you use columns.

It may be a bug.

long-lazuli
  • 404
  • 3
  • 9
0

Try running in compatibility mode. Also, I understand that z-index is not the only step. In order for the reference to be cross-browser compatible, the push and footer classes also need to be position relative for the z-index to be recognized (add -webkit-transform:translate(0,0)).