locked
Items disappear inside viewbox on MSPointerDown

    Question

  • Hi,

    We are having a problem with combination of ViewBox and MSPointerdown/MSPointerUp events(inner elements).

    We have some image items (<img />) which we need to place absolute positioned inside a div. For supporting different resolutions, we are wrapping container div inside viewbox. There are two different events are attached to every image element. First is click event to make some calculations and second is MSPointerDown/MSPointerUp to add push animation effect.

    Layout (Programming):

    <div class="viewbox">
    
    	<div class="container">
    
    		<img class="myImage" src="image1.png" />
    
    		<img class="myImage" src="image2.png" />
    
    		<img class="myImage" src="image3.png" />
    
    		<img class="myImage" src="image4.png" />
    
    		<img class="myImage" src="image5.png" />
    
    	</div>
    
    </div>

    Problem statement: Whenever we click on the items with the class "myImage" they are disappearing. But, when we check in the dom explorer, they are still there in the same place. 

    The working state: Things working fine if

    1. We are not make outer div a viewbox or

    2. If we remove MSPointerDown effect from img elements.

    Any help appreciated.

    Thanks

    Friday, August 23, 2013 11:12 AM

All replies

  • What do you see in the "styles" section of the DOM Explorer? Does it show anything that could set the visibility of the image to hidden?

    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Saturday, August 24, 2013 1:07 AM
    Moderator
  • No Sir, Everything seems right in dom explorer.

    But there is a strange problem. Whenever I go to DOM Explorer -> Select Element, it switches back to application (as expected) and shows all the items again (strange) and the problem is gone. So We can not even debug it. I'm sharing bug related video with you. [LINK]. Please let me know if you need further information.


    • Edited by manish.zedwal Saturday, August 24, 2013 7:34 AM spell mistake
    Saturday, August 24, 2013 7:13 AM
  • Hello Prashant,

    We even tried to attach custom push down and up effects (like WinJS.UI.Animation.pointerDown/pointerUP) effects in our code but the problem persists. Here is the sample code we used:

    onImagePushDown: function (element, callback) {
    	var mouseDownEffect = function (el) {
    		console.log("pointer_down");
    		element.style.msTransform = "scale(2, 2)"; // Same problem generated by this line
    	}
    	var mouseUpEffect = function (el) {
    		console.log("pointer_up"); // never executed bcoz item disappear on pointer down
    	}
    	element.addEventListener("MSPointerDown", mouseDownEffect);
    	element.addEventListener("MSPointerUp", mouseUpEffect);
    }

    Any help.

    Saturday, August 24, 2013 4:46 PM
  • Is there anyone else who faced the same issues??
    Monday, August 26, 2013 9:51 AM
  • Your code seems to be using some third party library or some custom JavaScript library called "PlatformJS", so, unless you can share your complete repro (or just a stripped down isolated version of your problem) publicly via SkyDrive or some other sharing means, it is not possible to understand what is actually happening.

    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Monday, August 26, 2013 5:23 PM
    Moderator
  • Hi Prashant,

    Thanks for your time. "PlatformJS" is just a namespace we have created. Here is the link to stripped down version of the code [LINK]. Please let me know if you need anything else.

    Thanks

    Tuesday, August 27, 2013 11:38 AM
  • Hi Manish,

    I downloaded the files you uploaded, but the problem is not apparent by just seeing the files. Can you actually create a simple project using the files and the associated images so that it is a complete repro. That way it will be easier to troubleshoot and understand what is going on.

    Thanks,

    Prashant.


    Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog, http://aka.ms/t4vuvz

    Thursday, August 29, 2013 9:47 PM
    Moderator