Forums » Help » Mouse click working in browser mode, but not in mobile safari

Hey guys,

I'm having a little trouble getting a mouse click to register in mobile safari.

From what I've been reading that seems the way that most people are handling touch and swipe events is through something like:

        // in main.js 
	ig.input.bind( ig.KEY.MOUSE1, 'canvasTouch' );

and then later checking with that action.

I'm getting the clicks to work when testing in the browser, but when I try with safari on iPhone I'm getting no feedback.

I think you might need to use ig.input.bindTouch.

I'm fooling around with bindTouch. It wouldn't let me use the canvas so I had to make an empty div over top and put the bindTouch on that. Is that normal?

Anyway, so I have the event firing but now I can't get the mouse position from ig.input.mouse anymore.

...or rather I'm getting a position that isn't relevant to where I'm touching.

So what do you get and what do you expect to get?

I'm getting x and ys, that are not changing depending on where I touch. I expect the x value to change as I touch different points from left to right instead of the consistent values I am getting (which is 0,0) from ig.input.mouse.x and ig.input.mouse.y

Ok, now I've figured out the source of the mouse clicks, etc, not registering.

//main.js
//what is applied to the canvas when it's mobile
	c.style.webkitTransformOrigin = 'left top';
		c.style.webkitTransform = 
			'scale3d(2,2, 0)' +
			'';

This is the code from one of the demos. When I remove these transforms, my clicks work.

But, now I'm not exactly sure how I can scale this properly...

Hi Cody,

which line are you referring to? I'm having similar problems as you but I can't find the line in main.js you're talking about?

Thanks!

Using AppMobi?

Might be best to ask on their forums...

@Arantor:Nope, not using AppMobi. It was just part of the jumpnrun demo (if I remember properly).

@Trifu: This is the larger part of the main.js code. It's part of the commented out part in the if (ig.ua.mobile) section.

if( ig.ua.iPad ) {
	ig.Sound.enabled = false;
	ig.main('#canvas', MyGame, 60, 240, 160, 2);
} else if( ig.ua.mobile ) {	
	ig.Sound.enabled = false;
	var width = 480;
	var height = 320;
	ig.main('#canvas', MyGame, 60, 480, 320, 1);
	
	var c = ig.$('#canvas');
	c.width = width;
	c.height = height;
	
	// var pr = 2;//ig.ua.pixelRatio;
	// if( pr != 1 ) {
	// 	//~ c.style.width = (width / pr) + 'px';
	// 	//~ c.style.height = (height / pr) + 'px';
	// 	c.style.webkitTransformOrigin = 'left top';
	// 	c.style.webkitTransform = 
	// 		//~ 'translate3d('+(width / (4 * pr))+'px, '+(height / (4 * pr))+'px, 0)' + 
	// 		//~ 'scale3d('+pr+', '+pr+', 0)' +
	// 		'scale3d(2,2, 0)' +
	// 		'';
	// }
	//~ ig.system.canvas.style.width = '320px';
	//~ ig.system.canvas.style.height = '320px';
	//~ ig.$('#body').style.height = '800px';
	
	    //~ 320
	 //~ 80 480  80 // div 320/1.5 = 213
	//~ 160 640 160 // div 320/2 = 160
	
	
}
else {
	ig.main('#canvas', MyGame, 60, 320, 240, 2);
}
});