2 Replies Latest reply on Jun 27, 2013 1:25 AM by Phildsb

    Scaled iframe and position of touch events

    Phildsb Level 1

      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?

        • 1. Re: Scaled iframe and position of touch events
          elainecc Adobe Employee

          Hi, Phildsb-

           

          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:

           

          http://html.adobe.com/edge/animate/showcase.html

           

          -Elaine

          1 person found this helpful
          • 2. Re: Scaled iframe and position of touch events
            Phildsb Level 1

            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:

             

            Dynamic scaling iframe

             

            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?