Saturday, June 30th, 2007

iPhone Safari Notes and Quirks

Category: iPhone

>Now we can get our hands on an iPhone, developers are testing out Safari to see what is actually available. How is the DOM? What events get fired? How does the keyboard send onkey* events? How is scrolling handled? How is the JavaScript support?

Abe Fettig has been jotting down his notes, which include:

  • Poking around the DOM, I don’t see any special objects, with the possible exception of window.offscreenBuffering (set to true).
  • Bookmarklets work, although you have to go through the bookmarks menu to get to them.
  • Safari crashes are handled gracefully – the main screen fades back in, and you can jump right back into Safari. It will then load page you were visiting when it crashed.
  • Drag and drop, and other behaviors based on picking up mousemove events, don’t work. CSS-based element drag and drop doesn’t work either. Dragging one finger around the iPhone’s version of Safari causes the window to scroll, and that’s it. I assume that scroll events do work. I’m sure somebody is already working on a version of drag and drop based on window scrolling.
  • For documents with no width set, the iPhone uses a default width of 980px.

Joe Hewitt isn’t too happy with his experiments:

My first task has been exploring the DOM events that you can handle. You do not get “mousedown” when you touch the screen. You get “mousedown” and “mouseup” at the same time when you release your finger. The “mousemove” event does not seem to fire at all. There is no way to handle double-clicking because that is the action for zooming, and calling event.preventDefault() doesn’t seem to override that.

If Safari is the current SDK, we need help as developers to build, and debug, applications.

Posted by Dion Almaer at 1:09 am
10 Comments

+++--
3.9 rating from 28 votes

10 Comments »

Comments feed TrackBack URI

wow. thanks for the info.

Comment by h. kramer — June 30, 2007

I have been able to get mousemove to fire in a bizarre way. First, I installed a mousemove capture listener on a SPAN, then I installed a click listener that does nothing but preventDefault(). The result is that mousemove is called when you click the SPAN. Oh, I also think you need a web page that has no horizontal scrollbar.

Has anyone tried the ondragstart/ondrag/ondragend stuff that WebKit supports?

Apple needs to let the Safari browser get first dibs on events before gobbling them up to handle high level drags. They should generate mousedown on first touch, mousemove while dragging your finger, and mouseup when you let go. If preventDefault() isn’t called, then do the magic ‘flick scrolling’ stuff.

Comment by Ray Cromwell — June 30, 2007

I posted the code on my blog at http://timepedia.blogspot.com

-Ray

Comment by Ray Cromwell — June 30, 2007

LOL @ “Safari crashes are handled gracefully”.. as if it’s an assumed part of the functionality of Safari that it regularly crashes.

Comment by Rory — June 30, 2007

I had one crash when trying to cancel a photo note at Flickr. It wasn’t that alarming because I knew I was trying something tricky. No crashes for normal behavior, including editing a SocialText wiki page and also adding this comment.

Comment by Casey West — June 30, 2007

There’s no svg support, so this is obviously not Safari 3 on the iPhone yet unfortunately.

Comment by Dylan Schiemann — July 1, 2007

You may be interested in the discussions in the http://www.iPhoneWebDev.com community — lots of discussion today on viewports, disabling scaling, and other issues in creating iPhone web pages and web apps.

Comment by Christopher Allen — July 1, 2007

Hey,

I just did some benchmarking with javascript with my new iPhone and my 2.4GHz macbook pro check it out @ http://www.johnmurch.com/2007/07/01/iphone-javascript-and-spec-benchmark/

I will also be posting some issues on sites as well as some problems with safari on the iPhone.

Enjoy!

Comment by John — July 1, 2007

You say you assume scroll events work, but other than two finger scrolling the “Pan” mode seems to fire no events at all. I’m assuming this must be “missing docs” kind of stuff. I see that “onscroll” doesn’t fire on window, document, or document.body, and none of the normal scroll position values change during “panning”. Taking the philosophy of the display as panning around a full window, I even tried the window position values, and they don’t change either.

Very frustrating.

Comment by mikepk — July 1, 2007

woooooyeeeee look at you guys with your fancy iphones ;)
can’t wait to see it in the flesh myself!

Comment by Stu — July 2, 2007

Leave a comment

You must be logged in to post a comment.