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)
Change History (7)
Changed 8 years ago by
Attachment: | reproduction_code_snippet.txt added |
---|
comment:1 Changed 8 years ago by
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
Attachment: | patch16956.patch added |
---|
For iOS 6, enable hardware acc. to avoid flickering - Adrian Vasiliu (IBM, CCLA)
comment:2 follow-up: 3 Changed 8 years ago by
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>
comment:3 Changed 8 years ago by
Thanks Adrian. With -webkit-perspective: 1000 I don't see the issue any more.
comment:5 Changed 8 years ago by
Milestone: | tbd → 1.9 |
---|---|
Resolution: | → fixed |
Status: | new → closed |
Code snippet to reproduce the problem