z-index在iPad和Google Chrome 22上未正确呈现 [英] z-index not properly rendered on iPad and Google Chrome 22
问题描述
我附上了两张图片，第一张显示了我工作的webapp的桌面，一些图标显示了由< div /> 包含一个< iframe /> ，但是在普通PC上它都能正常工作，在iPad上似乎存在z-index问题一些元素，如第二张图所示。
里面有数字的小红色圆圈定义如下：
.countComunicazioni {
position：relative;
背景：url（/images/admin/menu_sgs/counter.gif）无重复中心;
height：35px;
width：35px;
颜色：#FFF;
top：-105px;
left：120px;
z-index：0;
font-weight：bold;
display：none;
}
.countComunicazioni p {
margin-top：-5px;
padding-top：10px;
}
标记是< div class = / $ gt; 标记和< p /> 标记。
根据此错误报告（ http://code.google.com/p/chromium/issues/detail?id=144518 ），这个变化似乎是有意的，即使我敢打赌它会打破许多布局，不仅仅是我们的。
以前版本的Google Chrome浏览器中没有此问题，Firefox V15或Internet Explorer V9中也没有此问题，因为所有问题都存在问题。
这个问题如何解决？我不是CSS专家，所以我必须承认，到目前为止，我已经尝试了很少，如果有的话......还有，谁在这里正确？我们的标记是不正确的，还是问题出在谷歌浏览器的新渲染策略上？
编辑
解决这两个图片中显示的问题：从我的Web应用程序生成的所有对话框都放置在< div /> 中，其中位置：固定放置在主体的顶部，现在我试图将div移动到页面的最底部，布局看起来正确。
还有一个问题：当打开模式对话框时，应该在对话框和下面的内容之间创建的不透明层实际上是在它上面创建的，请参阅新的屏幕截图。
t怎么可能他的问题解决了吗？是否需要修改我们的javascript或者它是jQuery UI本身的问题？
解决方案刚刚发现自己， 22+手柄z-index已被改变。
查看这里的真棒解释，我没有写在这里...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
基本上我的理解是，元素有
pre $
位置：固定
现在可以使用自己的z-index图层计算，因此您必须调整页面相应地适合。
希望有所帮助！
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?
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!
这篇关于z-index在iPad和Google Chrome 22上未正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
