Opened 8 years ago

Closed 8 years ago

Last modified 8 years ago

#13382 closed defect (fixed)

Transition Animation: After 1st time transition, Scrolling View will Flash

Reported by: Ming Zhe Huang Owned by: ykami
Priority: high Milestone: 1.7
Component: DojoX Mobile Version: 1.7.0b1
Keywords: 1.7-mobile Cc: Atsushi Ono
Blocked By: Blocking:

Description

This might have some thing to do with defect 13154. Please use iOS device (iPhone or iPad) to visit: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/mobile/tests/test_transition-animations2.html

  1. Click any list item.
  2. After the view is transitioned, try to scroll the view.
  3. You'll find the scrolling will cause screen flash.

Please see the attached video.

Attachments (3)

iphone_flicker_issue_patch.txt (3.1 KB) - added by ykami 8 years ago.
Patch from onoat (IBM, CCLA)
test_iPhone-Flicker1.html (842 bytes) - added by Atsushi Ono 8 years ago.
iOS flicker issue minimum example 1
test_iPhone-Flicker2.html (1.1 KB) - added by Atsushi Ono 8 years ago.
iOS flicker issue minimum example 2

Download all attachments as: .zip

Change History (12)

comment:1 Changed 8 years ago by Douglas Hays

Component: GeneralDojoX Mobile
Owner: set to ykami

comment:2 Changed 8 years ago by ykami

Cc: Atsushi Ono added

comment:3 Changed 8 years ago by ykami

Keywords: 1.7-mobile added
Milestone: tbd1.7
Status: newassigned

Changed 8 years ago by ykami

Patch from onoat (IBM, CCLA)

comment:4 Changed 8 years ago by ykami

Thanks onoat for contributing the patch. I tried it and saw the annoying flickers were greatly reduced. Do you have a minimum example that causes the flicker for those who have interest in this issue?

comment:5 Changed 8 years ago by ykami

Resolution: fixed
Status: assignedclosed

In [26606]:

Fixes #13382 !strict Added workaround for iOS flicker issue. Hide the destination view below the starting view until a flicker has been done, and then show the destination view.

Changed 8 years ago by Atsushi Ono

Attachment: test_iPhone-Flicker1.html added

iOS flicker issue minimum example 1

Changed 8 years ago by Atsushi Ono

Attachment: test_iPhone-Flicker2.html added

iOS flicker issue minimum example 2

comment:6 in reply to:  4 Changed 8 years ago by Atsushi Ono

Replying to ykami:

Do you have a minimum example that causes the flicker for those who have interest in this issue?

I have investigated this issue, and found that the flicker can be reproduced with quite simple html and javascript without Dojo. Basic factors for flicker seem to be the element of long height (more than 1024px) and "-webkit-transform:translate3d(x,y,z)" style. I have attached two simple examples. Details are as follows:

1) In test_iPhone-Flicker1.html, flicker occurs when "-webkit-transform:translate3d(0,0,0)" style is set to the element of long height (1025px).

2) In test_iPhone-Flicker2.html, flicker occurs when the long elements with "-webkit-transform:translate3d(0,0,0)" style are displayed alternately by switching "display" style from "none" to "".

Workarounds are as follows:

1) Set "-webkit-transform:translate3d(0,0,0)" style initially to long element. Not to set it after the element displays.

2) When switching "display" style of long element from "none" to "", hide it behind other elements inside screen area, and wait until flicker ends (about 50-100ms), and move to the front.

The patch above is based on these workarounds.

comment:7 Changed 8 years ago by zhangyp

another setTimeout work around? We should be cautious on setTimeout and solve the root cause of the problem. Originally, the scroll performs well on iOS. If we can find the exact point/check-in where this problem happens, it would be helpful to solve the problem on the root cause.

comment:8 Changed 8 years ago by ykami

See the above onoat's comment for the root cause. We can easily reproduce it even without dojo. Don't be confused, there're two flicker issues here.

comment:9 Changed 8 years ago by ykami

In [26628]:

Refs #13382 !strict The workaround should be applied only when ScrollableView? is used somewhere.

Note: See TracTickets for help on using tickets.