关于CSS3 translate3d闪烁,检查了很多答案,但似乎不吉利

时间:2012-01-29 09:27:21

标签: css ios web-applications flicker translate3d

首先,我在iOS上做一个html5 webapp,特别是iPad。当touchmove时,div应该用我的手指一起移动,我习惯改变左边的值来产生这个效果,但是看起来不够平滑,所以我用translate3d来做它,看起来很棒!   然后,我发现了奇怪的闪烁发生,当手指移动div时,有几次白色闪烁或闪光。顺便说一下,移动一次后,闪烁就消失了。   所以,我检查了很多功能,包括:

  

-webkit-perspective:1000;

     

-webkit-backface-visibility:hidden;

     

-webkit-transform:translate3d(0,0,0)rotate(0)scale(1);

但除了将闪烁颜色更改为灰色=。=之外,没有人可以工作 所以,这是我的问题。(iOS 5.01)

2 个答案:

答案 0 :(得分:0)

你应该检查孩子,试着给他们

  

transform:translate3d(0,0,0);

     

-webkit-transform:translate3d(0,0,0);

答案 1 :(得分:0)

当输入元素的副本在向下和向上滚动后在下一个内容中显示为工件时,我遇到了更奇怪的问题。 CSS的几行保存了一天(实际上是挣扎的日子:)。

确保为滚动容器和其中的所有子项使用此类CSS

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}