iPhone WebKit CSS animations cause flicker

2019-01-02 19:10发布

站内问答 / HTML/CSS
1728 18 5

This is the iphone site: http://www.thevisionairegroup.com/projects/accessorizer/site/

After you click "play now" you'll get to a game. The guns will scroll in. You can scroll the purse and accessories up and down. You can see that when you let go they snap into place. Just as that snap happens, there's a flicker that occurs. The only webkit animations I'm using are:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

I choose either the first or second transition based on whether or not I want it to animate, and the transform is the only way I move things around.

The biggest issue though is when you click "Match items", then click "Play again". You'll see as the guns animate in, the entire background of the accessories/purses goes white. Can someone please radiate me with some insight asto why this is happening??

18条回答
十年一品温如言
2楼-- · 2019-01-02 19:57

I had to use an actual value (rather than 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Example:

<div class="foo no-flick"></div>

From what I've read, the flicker is caused by the browser switching between hardware and software rendering. And I think browser manufacturers are aware of yea olde "translate3d(0,0,0)" to force hardware rendering -- so they may now be ignoring these fake values.

=> Using an actual value may cause things to "stick".

Anyway, worked for me.

查看更多
0人赞 添加讨论(0) 举报
浪荡孟婆
3楼-- · 2019-01-02 19:58 
body {-webkit-transform:translate3d(0,0,0);}
查看更多
0人赞 添加讨论(0) 举报
妖精总统
4楼-- · 2019-01-02 20:00 
div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

i noticed when i had a hover state on a div the page would flicker, even if i did not have any css or js attached to it. maybe this helps someone else.

查看更多
0人赞 添加讨论(0) 举报
谁念西风独自凉
5楼-- · 2019-01-02 20:01

The actual answer for my case is here. Someone was close with: -webkit-backface-visibility: hidden; But the real answer is -webkit-backface-visibility: hidden; needs to be added to the parent div.

查看更多
0人赞 添加讨论(0) 举报
余欢
6楼-- · 2019-01-02 20:05

I had spent a lot of time trying to figure out this issue for Ember Animated Outlets, Phonegap, and iOS setup.

Though simple, I had to add a background to each top-level parent element that was included in the css animations. In other words, make sure that at no point in your views there is an element that doesn't have a background.

My setup was this for each template and all three elements had a background color assigned to them:

<header></header> <body class="content"></body> <footer></footer>

查看更多
0人赞 添加讨论(0) 举报
人气声优
7楼-- · 2019-01-02 20:06

Here's a new solution. I was setting the background-image with jQuery, and none of the 3d-rendering tricks worked. So I tried using classes to define the properties instead. Voilà! Smooth as butter.

This causes flicker:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Instead do:

$('#banner').attr('class', '.slide-1');

with classes defined:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)