2

The nav of a website i have in production works as 3 tabs, each of the 3 corresponding content coming forward on click.

I just realized it doesn't work on Chrome 22 (although i'm 90% sure i tested it on Chrome a year ago when the site was brought online), but is perfectly fine on IE9 and FF16.

Here is a summary of my problem : http://jsfiddle.net/be7mQ/3/

As you can see, only the last tab of the 3 can be hovered (and therefore clicked) on Chrome 22. It's like Chrome created a new z-index stack for each .tab-container instead of just showing all elements with z-index:21 above the rest of the content.

All the elements are either position:fixed or position:absolute and i can't see what's wrong there, anyone?

darma
  • 4,687
  • 1
  • 24
  • 25

5 Answers5

4

It's like Chrome created a new z-index stack for each .tab-container instead of just showing all elements with z-index:21 above the rest of the content.

This behavior was deliberately introduced in Chrome 22. Boxes with position: fixed will create new stacking contexts in WebKit-based browsers regardless of their z-index, causing the behavior you're currently seeing.

More on that here. It is said that it is being proposed as a revision to the CSS2.1 spec to aid mobile implementations (the same behavior already occurs on mobile WebKit browsers); it was addressed to some extent in this set of minutes but there hasn't been any actual change to the spec yet as I've seen — indeed; the working group hasn't reached a consensus yet.

I for one agree with Microsoft's compatibility concerns; I can see this breaking a sizable portion of modern sites. The problem is exacerbated by workarounds basically being situational and totally dependent on the nature of the affected layout, as demonstrated by the other answers here.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • Thank you that was exactly what i was looking for. It is extremely annoying though, and only restricting possibilities since one still could chose to create a new stack context by setting a z-index value. Now there is no way to escape it, and i have a broken site, i'm pissed. – darma Nov 05 '12 at 18:24
1

BoltClock's answer was the one, and as previously written, each case will need a specific fix to this, but this is how i solved my own broken site :

http://jsfiddle.net/be7mQ/13/

i.e. put all my previous position:fixed divs in one only position:fixed parent #tabs that has z-index:1 to force a new stack on browsers other than Chrome22.

This way, within the new #tabs element i'm free to play with z-indexes again as before.

darma
  • 4,687
  • 1
  • 24
  • 25
0

Since you're using position fixed, the top: 0 property will make your last element hover all others. Instead of positioning your tab element, change the top of your tab-container, as follows.

Change your HTML to

<div class="tab-container info">
    <div id="info" class="tab">I<br/>N<br/>F<br/>O</div>    
</div>

<div class="tab-container news">
    <div id="news" class="tab">N<br/>E<br/>W<br/>S</div>    
</div>

<div class="tab-container shop">
    <div id="shop" class="tab">S<br/>H<br/>O<br/>P</div>    
</div>​

and your CSS to

.info{
    top:0px;
}
.news{
    top:100px;
}
.shop{
    top:200px;
}​

Fiddle

Matheus Azevedo
  • 878
  • 7
  • 18
0

Remove height: 100% from .tab-container. The height of the third tab is covering up the previous two. When I did this in your fiddle they were all clickable.

Dylan Valade
  • 5,565
  • 6
  • 42
  • 56
0

Because you are using 

height: 100%

on the .tab-container{, the last one is overlapping everything else hence only the third(last) one works for hovering. Try removing the height: 100% from your css for tab-container. It works!

Manish Pradhan
  • 1,141
  • 10
  • 28