Webkit-transform scale is not taken into account for mouse and touch events

[NickH-nz]

Mouse and touch events x and y coordinates are not scaled by the value specified in the webkit-transform style attribute.

Reproduction: If you take the Escape sample game and change the div directly surrounding the game's canvas to the following:

<div class="tab-pane active" id="demoShow" style="-webkit-transform: translate(0px, 0px) scale(0.8);">

You will notice that mouse clicks do not trigger under the mouse pointer.

[bp74]

Thanks for the bug report. I will take a look at it!

[bp74]

It turns out that this is a hard problem. I have investigated some possible solutions:

There is a function called window.convertPointFromPageToNode(node, point) This function converts page coordinates to node coordinates which would be perfect for our problem, but this is only available in WebKit browsers. There is a polyfill for other browsers but it is really complicated and i don't like it: https://gist.github.com/Yaffle/1145197

The current implementation of StageXL uses the client-coordinates of the mouse event to allow possible padding style settings. If we would use the offset-coordinates of the mouse event the transformation problem would be fixed in Chrome and IE but not in Firefox. The reason is that Dart uses a polyfill for the offset-coordinates in Firefox where transformations have no effect (it would need a similar polyfill as for the convertPointFromPageToNode function).

Next problem is with touch events. Those events don't have offset-coordinates at all so we have to use client-coordinates where we would need the convertPointFromPageToNode function.

Right now there is no good solution for this problem. If you need a workaround you could patch the Stage class in line 430.

// client to stage coordinate transformation
_clientTransformation.setTo(1.0, 0.0, 0.0, 1.0, - clientLeft - pivotX, - clientTop - pivotY);
_clientTransformation.scale(1.0 / scaleX, 1.0 / scaleY);

You could append another matrix transformation which corresponds to the transformation you apply to the canvas.

I will leave this issue open and i will check if browsers will get smarter over time.