Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook
Accepted Solution

CSS3 scale animation flickering contents bug

Can anyone confirm that OS10 browser have not problems with flickering contents after scale transition animation end like playbook with OS2.x

Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: CSS3 scale animation flickering contents bug

Do you have a test URL?

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook

Re: CSS3 scale animation flickering contents bug

here is some test pages. First two inputs have scale show clear button animation, after animation transition end text in inputs flickering

 

1)  simple change -webkit-transition style property, input text flickering in 9 of 10 cases maybe 10 of 10 on playbook

http://ct24.php5.cz/scale/a.html

 

2) change -webkit-transition-duration|property|timing-function, same flickering as first 

http://ct24.php5.cz/scale/b.html

 

3) same as 2) with webkitTransitionEnd binding,  flicker only sometime, better result then in 1) and 2) but still flickering

http://ct24.php5.cz/scale/c.html

 

4) for animation is used zepto.animate function which use setTimeout for init animation and use webkitTransitionEnd - result is more more beter then 3) but stil sometim flickering

http://ct24.php5.cz/scale/d.html

 

If someone try this pages in OS10 browser if have same problems as playbook browsers would be great.

Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: CSS3 scale animation flickering contents bug

Thanks for the test cases :smileyhappy:

 

So, on the PlayBook, D is the only version which almost never flickers. All the others were flickering.

 

On the Dev Alpha A... It's worse. They all flicker and on top of that, your finger is shooting lens missiles when you're switching from one text input to the other, because the engine is triggering the lens effect on the wrong element.

 

It would be great if you could report this problem in the tracker, with your test case.

--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook

Re: CSS3 scale animation flickering contents bug

hmm it sucks, could you report it on tracker please? I do not have such experience with it...

Developer
interfaSys
Posts: 817
Registered: ‎11-19-2009
My Device: Z10, Q10, 9900, 9790, PlayBook,

Re: CSS3 scale animation flickering contents bug

Unfortunately, due to the BBID single sign on mess, I don't have access to the developer portal :smileysad:.

But it's really easy to do. Select the OS version in the dropdown and paste your post above.

The tracker is here:
https://developer.blackberry.com/bdsc/ext-lnk?LINK_MODULE=ISSUE_TRK&LINK_URL=/jira
--
Olivier - interfaSys ltd
Developing for BlackBerry 10 devices using the Sencha Touch framework.
Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook

Re: CSS3 scale animation flickering contents bug

OK thanks for your help :smileyhappy: I create issue and post link here after

Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook

Re: CSS3 scale animation flickering contents bug

Contributor
polovi
Posts: 16
Registered: ‎03-25-2012
My Device: 9860, 9700, 9000, Blackberry Playbook

Re: CSS3 scale animation flickering contents bug

It seems that this problem is associated with css position property. When scaled object have position fixed no flickering problem. When inputs have or inputs parent have position relative/absolute then after scale animation end their text flicekring. When scaled object have position relative or absolute and inputs have not set position property then flickering only scaled element.

Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: CSS3 scale animation flickering contents bug

Everything looks fine on Dev Alpha 1675

 

If you've got a Dev Alpha then update it - this fixes a load of bugs

 

The browser has hit 485 + 11 on html5test.com (99 + 1 better than Firefox, 37 - 2 better than Chrome)




Click the like button if you find my posts useful!