我自己通过反复试验解决了问题。以为如果有人偶然发现这个问题,我会报告。仍应注意,在Chrome将自身更新为Chrome 13(13.0.782.107m)之前,没有发生此问题。
这里的技巧似乎是在声明时(或至少在动画化之前)translate3d
向基础<div>
(sq2
)元素添加操作sq1
。
否则,translate3d
对上层<div>
(sq1
)的操作将导致渲染忽略下方的z-index
和。我猜这是因为是在DOM中定义的,因此将在它之上呈现。sq1``sq2``sq1``sq2``sq2
因此,解决方案似乎是放入:s translate3d
的定义<div>
(将它们添加到两者中只是为了清楚):
HTML:
<div id="sq1" style="z-index:10; -webkit-transform: translate3d(0px, 0px, 0px);">
<div id="sq2" style="z-index:5; -webkit-transform: translate3d(0px, 0px, 0px);">