I'm using iframes to include Edge compositions on our pages. Some of these animations are quite complex and unsuited to a responsive approach, so to handle different sized browser windows I resize the iframe using transform:scale (and the various browser-specific versions of it).
This works perfectly, inasmuch as the composition scales dynamically as required, but it appears touch events are excluded from this scale. The position of the touch event is registered at the co-ordinates in the parent window, whereas the position of the elements on the Stage is at its scaled position (hope this is clear!)
For example, there is a Composition in which I've bound a function to the Stage to display the co-ordinates of either a mousedown or touchstart and touchmove. I have an element at co-ordinates (100,200). The Composition is in an iframe scaled to 50%, so the co-ordinates of the element on the parent page (assuming the iframe is in the top left of the page) are actually (50,100). Mousedown will show the co-ordinates within the Composition (100,200) whereas touchstart will show the co-ordinates within the parent page (50,100). So if I wanted to use that element as a button, this would effectively be disabled for touch, the touch event handler being at a different position.
I can see that there are pros and cons to both approaches, but is there some way I can apply the transform:scale to the touch events as well as mouse?