↓ Archives ↓

iPad Safari Bug: Touching iFrames

I didn’t want to buy an iPad. But in a recent project for one of our clients we had to optimize a page for the iPad. And that is why I just bought one to fix some bugs we had with that page. After some minutes of searching I came up with a nasty browser bug.

The page we developed contained a slider and an image that you can drag around. Both were implemented using the typical touch events that you know from mobile Safari: touchstart, touchmove, touchend, touchcancel. The page worked on my iPhone and on my iPad as well. But our client put the page into an iFrame in order to include it into his website. And that didn’t work.

After some investigation I discovered that the touch events worked in some situations, but not everywhere on the dom element. It turned out that the position of the iFrame has an impact on the area where the touch events work. Let’s say the iFrame is located 100 pixel below the documents top, then the touch events work anywhere on the image except for the lower 100 pixel. From what I know about browsers my guess is that the ‘cursor’ position is not calculated correctly when passing a touch event into an iFrame.

To get a better understanding, please try this little bug demo on your iPad or iPhone. The sources of the iFrame content look like this:

    <div ontouchstart="alert('touched');"
    <div ontouchstart="alert('won't be touched');"
    <div ontouchstart="alert('touched only in upper half');"

And the iFrame sources:

    <iframe style="position:absolute;top:200px;"
        border="0" src="iframecontent.html" width="400" frameborder="0"
        height="400" scrolling="auto"></iframe>

I reported the bug to Apple, but since their bug tracking is not very motivating, I might add the bug to webkit as well. (I didn’t even get an email telling me that the bug was reported.)


  • Oct 11th 201020:10
    by Margaret

    Hi volker,

    Did you found some solution for this issue? I have some similiar behaviour you describe, but I have an ifame with 2 divs inside (next to each other), the first one hast 15 boxes and the touch does not recognize the last 4; the second div has 6 boxes and does not recognize the the last 3 boxes i want to move.

  • Oct 13th 201009:10
    by volker

    Hi Margaret,

    I was able to solve this by getting rid of the iFrame. Do you have a link to your site such that I can check whether it is the same bug?

    Unfortunately, Apple’s bug tracker is quite closed so I have no clue when this bug will be fixed.

  • Dec 13th 201016:12
    by Noam

    Can you provide the URL for the report? Perhaps if more people say “I got this one too” it will be addressed?

  • Jan 19th 201119:01
    by volker

    Sorry, that I missed this comment.

    I filed the bug to apple (ID# 8313637) and they told me that it is a duplicate to ID# 7992472, which I’m unable to track. Their bug tracking is rather closed to external people. I also filed the bug to webkit.org, but as I expected they told be to send it to apple, since they are not responsible for such issues. Therefore, I don’t know anything about the status of this issue.

    You could try to make Apple aware that the issue affects more people, but my guess is that it doesn’t matter to them.

  • May 4th 201118:05
    by Kajan

    As far as I know, this bug have been fixed with iOS4.

    And concerning the code presented in this site there is a big mistake :

    <div ontouchstart="alert('won't be touched');"

    Just look at this line and meditate.

  • May 4th 201119:05
    by Clement

    That bug is resolved since ios 4, your test code has an error into the alert :
    Remove the quote in won’t be touched …

  • Leave a Reply