1 person found this helpful
Is there a reason you're using transform:scale instead of a resize on the iframe? I wrote a slightly different resizing iframe example here that might help you, although the elements within aren't scalable. Check out the "Floral Match Maker" sample here:
Thanks for your response Elaine. I'm using transform:scale because I want all the elements to be resizable with the same proportions and relationships to each other as the original, ie I want to change the size of the contents. Resizing the iframe on its own won't do that. Some of our clients want to use the compositions at different sizes, including getting an 800px by 600px composition into a smartphone window!
For our own purposes, we also want to be able display these compositions (at fixed proportions) in different size browser windows. Using transform:scale they can be displayed at any size, but their functionality on touch devices is impaired by the offset touch events. To see what I mean have a look at:
On your computer, change the size of your browser window: the infographic changes size but the buttons all remain functional (even when it gets too small to read!). Open on an iPad: in landscape it all works fine because no scaling has been applied, but in portrait mode the touch events are all offset (click on the numbers down the left hand side to see the offset - you'll need to touch at least number 4 to get any response at all).
What I'd like is a way to force touch events to behave like the mouse events in this example. Any ideas?