Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15855

iOS: dynamic zIndex value not being applied correctly

    Details

      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

      app.js

      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

          Issue Links

            Activity

              People

              • Assignee:
                vduggal Vishal Duggal (Inactive)
                Reporter:
                mcota Marco Cota (Inactive)
                Reviewer:
                Pedro Enrique (Inactive)
              • Watchers:
                0 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-17944
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Integration