↓ Archives ↓

Archive → August, 2010

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:

<html>
  <body>
    <div ontouchstart="alert('touched');"
        style="position:absolute;top:0px;width:200px;height:200px;background:yellow;"></div>
    <div ontouchstart="alert('won't be touched');"
        style="position:absolute;top:200px;width:200px;height:200px;background:red;"></div>
    <div ontouchstart="alert('touched only in upper half');"
        style="position:absolute;top:0px;left:200px;width:200px;height:400px;background:orange;"></div>
  </body>
</html>

And the iFrame sources:

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

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.)