Opened 8 years ago

Closed 8 years ago

#16956 closed defect (fixed)

RoundRectList flickers on selection in ScrollableView on iOS 6.1

Reported by: guppa Owned by: Eric Durocher
Priority: undecided Milestone: 1.9
Component: DojoX Mobile Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description

Browser: Safari OS: iOS 6.1.3 Device: iPhone 4s, iPhone 5

Using a RoundRectList? in a ScrollableView? with a fixed header and a fixed footer, I see an issue where the list flickers or jumps inside the ScrollableView? when I select any of the first five items. What I mean by flicker or jump is that the list item text briefly appears in the header area and then disappears. Its as if the touch to select the list item also triggers a wrong momentary scroll overlaying items on top of the header area before restoring the view to the original position - giving a feeling of the list jumping in the view.

I have tried both Dojo 1.8.3 and Dojo 1.9.0b2 releases.

This happens only if the list has more than 30 items. Also this happens only on selecting any of the first 5 items in the list. It is not seen on selecting any of the items after the first 5. (I also tried the LongListMixin? from Dojo 1.9, but that too has the same problem).

This of course, does not happen in a normal View (as opposed to ScrollableView?).

Below is html and javascript code to reproduce the issue.

<head> <meta charset="utf-8"/> <title>My Title</title> <style>@import "themes/iphone/iphone.css";</style> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"></meta> </head>

<body>

<div data-dojo-type="dojox.mobile.ScrollableView?" id="BigListView?"

selected="true">

<h1 data-dojo-type="dojox.mobile.Heading" fixed="top">My Header</h1> <ul id="myList"> </ul> <h1" data-dojo-type="dojox.mobile.Heading" fixed="bottom">My Footer</h1>

</div>

<script type="text/javascript" data-dojo-config="'parseOnLoad':false, 'async':true" src="lib/dojo/dojo/dojo.js"></script> <script type="text/javascript" src="app.js"></script> </body>

app.js:

require([ "dojo/ready",

"dojox/mobile/parser", "dojox/mobile/RoundRectList", "dojox/mobile/ListItem", "dojox/mobile/ScrollableView", "dojox/mobile/Heading", "dojo/domReady!"

Attachments (2)

reproduction_code_snippet.txt​ (1.6 KB) - added by guppa 8 years ago.
Code snippet to reproduce the problem
patch16956.patch​ (907 bytes) - added by Adrian Vasiliu 8 years ago.
For iOS 6, enable hardware acc. to avoid flickering - Adrian Vasiliu (IBM, CCLA)

Download all attachments as: .zip

Change History (7)

Changed 8 years ago by guppa

Attachment: reproduction_code_snippet.txt​ added

Code snippet to reproduce the problem

comment:1 Changed 8 years ago by guppa

Sorry for the malformed code snippet in the original report. Attached a text file with the snippets.

This problem has also been reproduced by Adrian Vasiliu, as mentioned on the dojo-interest mailing list (​http://mail.dojotoolkit.org/pipermail/dojo-interest/2013-April/075593.html)

Changed 8 years ago by Adrian Vasiliu

Attachment: patch16956.patch​ added

For iOS 6, enable hardware acc. to avoid flickering - Adrian Vasiliu (IBM, CCLA)

comment:2 Changed 8 years ago by Adrian Vasiliu

Besides the attached patch for fixing the library, the following workaround can be used: 

<style>
.dj_ios6 .mblListItem {
  /* enables hardware acc. to avoid flickering issues */
  -webkit-perspective: 1000;
}
</style>
Version 0, edited 8 years ago by Adrian Vasiliu (next)

comment:3 in reply to:  2 Changed 8 years ago by guppa

Thanks Adrian. With -webkit-perspective: 1000 I don't see the issue any more.

comment:4 Changed 8 years ago by Adrian Vasiliu

In [31198]:

fixes #16956. Fix flickering with iOS6 by using an iOS6-specific way to enable hardware acceleration.

comment:5 Changed 8 years ago by Eric Durocher

Milestone: tbd → 1.9
Resolution: → fixed
Status: new → closed
Note: See TracTickets for help on using tickets.