GitHub Issue | n/a |
Type | Bug |
Priority | Medium |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2014-03-18T23:27:33.000+0000 |
Affected Version/s | Release 3.1.3, Release 3.2.0 |
Fix Version/s | 2014 Sprint 06, 2014 Sprint 06 SDK, Release 3.2.3, Release 3.3.0 |
Components | iOS |
Labels | View, qe-closed-3.2.3, qe-testadded, supportTeam |
Reporter | Marco Cota |
Assignee | Vishal Duggal |
Created | 2013-12-02T13:03:08.000+0000 |
Updated | 2014-04-03T17:22:47.000+0000 |
Description
When assigning a dynamic zIndex value to a view from a touchend event the value is assigned but not always get displayed on iPad.
Steps to reproduce
Run the code on ipad and do a fast horizontal scrolling to move the views around, randomly the views will start not showing the zindex that was setted.
Test Case
var w = Ti.UI.createWindow({orientationModes : [
Titanium.UI.LANDSCAPE_LEFT,
Titanium.UI.LANDSCAPE_RIGHT
],
});
var card=[];
var centrePosition = (512);
var cardSize = 150;
var distance;
var touchX;
var colors=['red','blue','yellow','orange','purple','white','gray'];
var position = [(centrePosition-300),(centrePosition-200),(centrePosition-100),(centrePosition),(centrePosition+100),(centrePosition+200),(centrePosition+300)];
for (var i=0;i<=6;i++){
card[i]=Ti.UI.createView({
width:150,
height:100,
backgroundColor:colors[i],
left:position[i]
});
w.add(card[i]);
}
var lbl = Ti.UI.createLabel({
color:'white',
top:100
});
w.add(lbl);
function arrangeZIndex(){
for (var i=0; i<=6; i++) {
var distanceFromCentre = (card[i].left - centrePosition) + (cardSize/2);
card[i].zIndex = Math.round(100 - (Math.sqrt(distanceFromCentre*distanceFromCentre)/100));
Ti.API.info("card "+(i)+" zindex:"+card[i].zIndex);
}
lbl.text = "card red zindex:"+card[0].zIndex+" card blue zindex:"+card[1].zIndex+" card yellow zindex:"+card[2].zIndex+"card orange zindex:"+card[3].zIndex+" card purple zindex:"+card[4].zIndex+" card white zindex:"+card[5].zIndex+" card gray zindex:"+card[6].zIndex;
}
function fingerDown(e) {
touchX = e.x;
}
function moveCards(e) {
var distance = 0;
if(touchX != e.x){
distance = e.x - touchX;
touchX = e.x;
}
for (var i=0; i<=6; i++) {
card[i].left += distance;
}
}
w.addEventListener('touchstart', fingerDown);
w.addEventListener('touchmove', moveCards);
w.addEventListener('touchend', arrangeZIndex);
arrangeZIndex();
w.open();
Console log
[INFO] : card red zindex:95
[INFO] : card blue zindex:96
[INFO] : card yellow zindex:97
[INFO] : card orange zindex:98
[INFO] : card purple zindex:99
[INFO] : card white zindex:100
[INFO] : card gray zindex:99
As you can see in the attachment even when the white view has a zindex value of 100 the gray view with a 99 zindex value is shown on top.
Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/5443 3_2_X - https://github.com/appcelerator/titanium_mobile/pull/5457
Tested and verified the fix with: Mac osx 10.9.2 Mavericks Appcelerator Studio, build: 3.2.3.201403181115 Titanium SDK, build: 3.2.3.v20140318131613 Node.JS Version: v0.10.13 NPM Version: 1.3.2 ├── acs@1.0.14 ├── alloy@1.3.1 ├── npm@1.3.2 ├── titanium@3.2.1 └── titanium-code-processor@1.1.0 Device: iPad Air iOS 7.0.3 Zindex value is being applied correctly