List of known "Safari on iPad" differences over "Desktop Safari"

Question

In recently testing a web application on Windows/Mac desktop browsers - and then on an iPad I noticed various differences in Safari that I wasn't expecting. even though the version # is the same.

I'd like to compose a list of those differences (for myself and others) to have as a developer reference.

e.g. in Safari on the iPad

• iPad Safari takes full control of Select list/option styling
• iPad opens the onscreen keyboard when an input element receives focus, thus inline floating calendar widgets (and the like) may not work as expected (or need to be altered)
• iPad Safari doesn't support position:fixed like desktop Safari
• iPad Safari (similar to iPhone/iPodTouch Safari) automatically hyperlinks 10 digit numbers to offer phone #/contact options
• iPad Safari prompt('long message...','default'); shows only 1 line of the message (though it does provide scrolling of the message

I've heard from others that certain JavaScript doesn't work, etc. etc. but I have yet to fully test it thus I'd be grateful for any discoveries that you may have encountered.

Answer 1

It also looks like iPad Safari has issues with elements with overflow:auto; that therefore should show scrollbars (test page with div's and iframe's).

Answer 2

I thought this might be useful: Apple's guide to preparing web content for the iPad

Just been caught out by the position:fixed issue my self

Answer 3

A few more for you:

1. No Flash
2. Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
3. Weird caching limitations
4. HTML textAreas doesn't get a scroll bar (you have to double-finger swipe - which of course, is amazingly intuitive)

In general. Treat it like a scaled up iPhone, not a scaled down Desktop.

Answer 4

Safari on iPad has the same issue with button width/padding as on the iPhone

http://stackoverflow.com/questions/3430506/iphone-button-padding-unchangeable describes this problem and a solution for removing padding on a button with text, but this does not help you if you want a button to be narrower than the padding itself (e.g. for a button that only has a small icon on it). To do that, I had to surround the button with an outer element with a defined width and overflow: hidden like so:

<span style="border: solid 1px blue; display: block; width: 16px; overflow: hidden">
    <button style="-webkit-appearance: none; border-width: 0">&nbsp;</button>
</span>

(the blue border is to show where the button is, it's not critical to the hack)

Answer 5

This rule fixes animation flickering in Safari on iOS devices:

body {-webkit-transform:translate3d(0,0,0);}