相关疑难解决方法(0)

我有两个绝对定位的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转换.

更新

很抱歉没有添加细微的细节,我们也将很多div元素叠加在一起z-index.在解决了这个问题之后,似乎webkit-transform实际上与z-index排序混淆了,而实际问题与动画本身无关.

结束更新

我目前正处于一个项目中,我们开发了一个非常重视CSS3动画的应用程序.我们div用-webkit-transform和来制作很多元素-webkit-transition.

一切都很好,直到今天,页面的所有待动画元素都消失了.谷歌浏览器似乎已经从12.xx升级到13.0.782.107m,现在,突然之间,带有-webkit前缀的CSS3属性已经停止工作,并且已经应用​​了这个属性的元素不再显示.-webkit-transform通过Chrome调试器删除属性会使元素再次可见.

有没有其他人遇到过同样的问题,或者知道如何解决这个问题？

我可能会补充一点,我试图仅删除-webkit前缀(只留下transform),然后显示缺少的元素,但之后根本不会为元素设置动画,因为transform不支持CSS3属性.

我一直在使用也试过el.style.webkitTransform和el.style.WebkitTransform,没有成功.

将传递一些示例代码来解释.期望的结果是sq1离开并揭示sq2.

HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">

JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";

我在Chrome和Safari中有一些奇怪的行为.我有一个scaled(transform: scale())容器,里面有视频和其他元素.在一些缩放中,具有高z指数的绝对定位元素消失并且不再返回.

我怎样才能解决这个问题？请注意,我不能给视频元素一个负z-index,我需要使用overflow: hidden;.

例

我做了一个例子,可以向上和向下扩展最外面的容器.在特定比例值处,具有类.on-top(和文本"I should always be on top.")的元素消失.当再次缩小时,它会突然出现.

链接到exmaple:https://jsfiddle.net/iafiawik/Lcox1ecc/

结论

• 看起来元素的大小很重要.我做得越大,它消失之前的比例值就越大.
• 我还测试了transform: scale(1.4)直接在元素上设置CSS,行为是一样的.

如果我这个问题不存在:

• 用div替换视频标签
• position: absolute;从兄弟姐妹中删除.on-top(即.below)
• overflow: hidden;从中移除.content
• 如果我移动.on-top,则将其放在文档流程中的视频标记之后

(但是当然,由于项目的具体原因,这些变通办法在现实中都不适用于我.我也不能给视频元素一个负面的z-index,我需要使用overflow: hidden;.)

来自社区的建议解决方法(谢谢!)

• 为视频标记提供负z-index(不能这样做,因为我有时会在视频后面放置元素)
• 删除overflow: hidden;(我无法删除overflow: hidden;)

浏览器

我在Chrome(Mac)和Safari(Mac)中看到了这个问题.

更新1

似乎这个错误报告几乎涵盖了我的问题.但是,它没有为它提供修复.

更新2

我通过提供解决这个问题的方法回答了我自己的问题.

更新3

有许多答案可以修改z-index视频或添加translateZ到.on-top元素.演示已经表明这两种方法都可以解决这个问题.但是,由于我的HTML结构是可视化HTML编辑器的输出(长篇故事......),我不知道它们将是什么元素,或者它们应该位于视频的前面,下面还是旁边.因此,我正在寻找一种解决方案,不需要更改缩放元素内的单个元素.

问题

我试图让一个层看起来像是一堵墙倒塌,露出它背后的层.我已经设置了两个固定的div位置."Wall"div的z-index为9999,"Background"div的z-index为0;

在我测试的Webkit浏览器(Safari/IOS)中,似乎一旦动画在"墙"上开始,z索引就会丢失或被忽略,导致"墙"层突然消失在背景div后面.

关于如何保留图层的z索引的任何想法？提前致谢!

示例代码 (注意:底部的jsFiddle)

HTML代码

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

一些javascript启用按钮

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

CSS代码(来自animate.css)

#wall{
    background-color: #F00;
    width: 100px;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    z-index: 9999;
}

#background{
    background-color: #00F;
    width: 100px;
    height: 100px; 
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
} …