我有两个绝对定位的div元素重叠.两者都通过css设置了z-index值.我使用translate3dwebkit变换在屏幕上为这些元素设置动画,然后再返回到屏幕上.变换后,元素不再遵循其设定z-index值.
任何人都可以解释一旦我对它们进行webkit转换后,div元素的z-index/stack-order会发生什么？并解释我可以做些什么来保持div元素的堆栈顺序？
以下是有关我如何进行转换的更多信息.
在转换之前,每个元素都通过css获取这两个webkit转换值(我使用jQuery来执行.css()函数调用:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
然后使用translate3d -webkit-transform对元素进行动画处理:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
顺便说一句,我已经尝试将第三个参数设置translate3d为几个不同的值,以尝试在3d空间中复制堆栈顺序,但没有运气.
此外,iPhone/iPad和Android浏览器是我的目标浏览器,此代码需要运行.两者都支持webkit转换.
我正在开发一个网络应用程序,它-webkit-overflow-scrolling:touch在几个地方使用,以提供溢出的divs惯性滚动.
自从更新到IOS8后,-webkit-overflow-scrolling: touch停止了你能够滚动的任何东西,到目前为止我能够解决这个问题的唯一方法是删除-webkit-overflow-scrolling: touch标准的粘性滚动.请帮忙!
以下是适用于iOS5,6和7的标准类之一的示例:
.dashboardScroll {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /*MAKES OVERFLOWN OBJECTS HAVE INERTIA SCROLLING*/
-webkit-transform: translateZ(0px); /*HELPS THE ABOVE WORK IN IOS5*/
}
我知道iPhone曾经不支持位置:固定,但是现在它确实存在,当我在具有更高z-index的其他元素后面滚动固定位置元素时,我看到了一个奇怪的故障.具有较低z-index的固定位置元素暂时出现在前面,这看起来非常糟糕.有办法防止这种情况吗？
我尝试添加-webkit-transform: translate3d(0, 0, 0);到固定元素,它似乎没有帮助这个问题.
transform:translateZ(x)除了z-index之外
我添加的更新并没有解决问题.
Update2
我添加了-webkit前缀,这可以解决移动Safari上的z-index问题,但也会导致位置:已修复在桌面Chrome中无法正常工作.