Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15855] iOS: dynamic zIndex value not being applied correctly

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2014-03-18T23:27:33.000+0000
Affected Version/sRelease 3.1.3, Release 3.2.0
Fix Version/s2014 Sprint 06, 2014 Sprint 06 SDK, Release 3.2.3, Release 3.3.0
ComponentsiOS
LabelsView, qe-closed-3.2.3, qe-testadded, supportTeam
ReporterMarco Cota
AssigneeVishal Duggal
Created2013-12-02T13:03:08.000+0000
Updated2014-04-03T17:22:47.000+0000

Description

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.

Attachments

FileDateSize
zindex.png2013-12-02T13:03:08.000+000070118

Comments

  1. Vishal Duggal 2014-03-05

    Pull pending master - https://github.com/appcelerator/titanium_mobile/pull/5443 3_2_X - https://github.com/appcelerator/titanium_mobile/pull/5457
  2. Olga Romero 2014-03-19

    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

JSON Source