z-index not properly rendered on iPad and Google Chrome 22

问题

I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.

The small red rounds with number inside are defined as follows:

.countComunicazioni {
    position: relative;
    background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
    height: 35px;
    width: 35px;
    color: #FFF;
    top: -105px;
    left: 120px;
    z-index: 0;
    font-weight: bold;
    display: none;
}
.countComunicazioni p {
    margin-top: -5px;
    padding-top: 10px;
}

The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.

I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.

As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.

This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.

How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?

EDIT

It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.

There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.

How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?

回答1:

Just found out myself that the way that chrome 22+ handles z-index has been altered. Check out this awesome explanation here that I didn't write here...

http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements

Basically the way I understand it is that elements which have

position: fixed

now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.

Hope that helps!

来源：https://stackoverflow.com/questions/12606155/z-index-not-properly-rendered-on-ipad-and-google-chrome-22

标签

ipad

google-chrome

z-index