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 < iOS 5
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.

Good on ya, but this might be better as a blog post somewhere, linked to from this question. If you’ve got questions about specific differences, Stack Overflow should be able to help. — Paul D. Waite, Jun 09 '10 at 14:21
I made this Community Wiki hoping that it could be a single resource... I find the scattered, buried comments and miss-information on blogs is what makes StackOverflow superior in providing the "correct" and concise information. Feel free to link to relevant blog posts in any answers though. I just got bitten by the `position:fixed` difference thus I'm sure other developers will find a list of **"known differences"** to be very handy. — scunliffe, Jun 09 '10 at 15:23

score 13 · Answer 1 · edited Jul 10 '10 at 02:15

13

A few more for you:

No Flash
Lousy iFrame support (so facebook like etc. needs a custom implementation for iPad)
Weird caching limitations
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.

edited Jul 10 '10 at 02:15

scunliffe

62,582
25
126
161

answered Jul 10 '10 at 01:42

Michael Mullany

30,283
6
81
105

any further details on what the iframe issue(s) are? – scunliffe Jul 10 '10 at 02:17
1

iframes on mobile safari don't respect overflow directives. here are some examples: http://www.webmanwalking.org/library/experiments/dsp_frames_outer_document.html – Michael Mullany Aug 03 '10 at 15:40
Mobile Safari does respect overflow, but it has no scrolling UI. You can scroll them using the _amazingly intuitive double-finger swipe_ you already mentioned for textareas. – mercator Jan 04 '11 at 13:28
4

Shouyldn't #2 be 'iFrames are lousy' ;) – Jon Hadley Mar 16 '11 at 10:08
<3 iframes. This isn't 1996 anymore. – Cory Mawhorter Oct 10 '11 at 15:49
Not only iframes, but any scrollable div. – Sam Dufel Apr 03 '12 at 19:14
@mercator: That's scrolling UI too. It's just not visible until you interact with it. – BoltClock Sep 29 '12 at 18:17
iframes are lousy, and Flash will reduce the battery life of a mobile device from 10 hours to 10 minutes. Technology must evolve; it is too bad some people get stuck with old technology and can't progress. iframes are deprecated by W3C standards. – Ricardo Parker Dec 11 '14 at 01:25
@RicardoParker, `iframe` is useful in some cases. Where did you see it is deprecated? http://www.w3.org/TR/2011/WD-html5-20110525/the-iframe-element.html – Mic Dec 22 '14 at 10:14

score 4 · Answer 2 · answered Jun 16 '10 at 15:27

4

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

answered Jun 16 '10 at 15:27

Ranguard

2,756
3
20
15

score 4 · Answer 3 · edited May 23 '17 at 12:25

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

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)

score 4 · Answer 4 · answered Mar 17 '11 at 19:39

4

jQuery's offset() doesn't work: http://bugs.jquery.com/ticket/6446

answered Mar 17 '11 at 19:39

alalonde

1,823
1
16
27

score 3 · Answer 5 · answered Jun 11 '10 at 14:31

3

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

answered Jun 11 '10 at 14:31

scunliffe

62,582
25
126
161

score 3 · Answer 6 · answered Nov 19 '10 at 13:45

3

iPad Safari seems to have trouble handling background images in rare cases, showing weird lines of lower lying content.

There's not a lot about this in Google (yet).

answered Nov 19 '10 at 13:45

Damien

1,219
13
23

I've noticed this too... I'll get hairline lines of color around PNG images with transparency sometimes... which are more obvious when zooming. – scunliffe Nov 19 '10 at 14:03

rubyprince · Answer 7 · 2011-06-07T06:16:23.507

3

iPad browser doesnt support file uploading(even if it supports it will useless as iPad does not have a standard File Browser). The file field appears with a Choose File button grayed out.

edited Jun 07 '11 at 06:16

answered Jun 06 '11 at 11:22

rubyprince

17,559
11
64
104

1

Quite true. Its too bad that it doesn't provide an option to pull an image/song/movie from the device or take a picture in the iPad2 case. Uploading an Avatar/Profile picture is a pretty common action. – scunliffe Jun 06 '11 at 13:34

score 2 · Answer 8 · answered May 29 '15 at 19:06

2

You can now control the styling of select lists on iOS by resetting it with -webkit-appearance: none;

answered May 29 '15 at 19:06

kspearrin

10,238
9
53
82

score 2 · Answer 9 · edited Dec 21 '11 at 11:53

Beside doesn't support scrollbar in TextAea, it seems that we can using javascript to make text in TextArea selected automatically too. This code will only move cursor to the end of text in TextArea.

<div>
  <textarea id="text-embed-code" autocapitalize="off" multiline="">
There is a fox running after chrome.
  </textarea>
  <button onclick="testSelectText(event);">select text</button>
</div>
<script>
  function testSelectText(e) {    
    var box = document.getElementById("text-embed-code");
    box.select();
    e.preventDefault();
    return false;
  }
</script>

score 2 · Answer 10 · answered Jan 12 '12 at 10:59

There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.

I just had the same bug on my site, when trying to view it on an Ipad. The HTML structure is like:

<div class="main"> <!-- background-color: white -->
   <div class="left"></div> <!-- background-image: url(some_transparent_png) -->
   <div class="content">...</div>
   <div class="right"></div> <!-- background-image: url(some_transparent_png) -->
</div>

The left layer uses a background-image, whereas the main layer uses just a background-color. The Ipad view shows a slight border at the edge of the left and right layer.

When i add

 -webkit-background-size: 100% 100%;

to the left and right layer, the border disappears.

score 1 · Answer 11 · answered Oct 14 '10 at 14:34

1

This rule fixes animation flickering in Safari on iOS devices:

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

answered Oct 14 '10 at 14:34

Brian D'Astous

1,314
1
18
26

Yes, but use with caution on pages with large DOMs or with many high res images. In those cases it can cause Safari to simply crash, reason yet to be determined. – Oskar Austegard Oct 19 '10 at 17:37
This fixed the flicker but broke a lot of other stuff. – mrbinky3000 Apr 11 '12 at 15:32

score 1 · Answer 12 · answered Dec 26 '10 at 02:59

There appears to be a bug in iPad Safari where a CSS element with both a background image and a background color is rendered with a slight border in the color of the background color. It should fill with the background image all the way to the edge of the rendered element.

score 1 · Answer 13 · answered Aug 25 '11 at 14:44

1

24 bit transparent PNGS ABOVE A CERTAIN FILE SIZE don't render on the iPad2.
I can however get 8 bit ones of the same dimensions to render.
I haven't found out what this maximum file size is in order to get them to render.

answered Aug 25 '11 at 14:44

PlanetPUSH

1
1

1

Interesting find... if you have any example links to images I'd be curious to try it out. (also is it limited to the iPad2? or is iPad1 affected also?) – scunliffe Aug 25 '11 at 18:14

score 1 · Answer 14 · answered Nov 28 '11 at 23:02

1

I'm currently working on a small responsive web-app which makes heavy use of the iframe youtube api. Apparently the ipad version of safari doesn't support a few html5 methods which I use heavily in this project.

One of them is window.postMessage, which is a way of interacting with scripts on other pages, for example the a script that is used "within" that iframe. Autoplaying videos also doesn't work.

answered Nov 28 '11 at 23:02

Julian

312
1
2
14

I'm not sure if Safari does support this or not, but is there any chance you are running into this more general issue? http://stackoverflow.com/questions/3457391/how-do-you-use-window-postmessage-across-domains – scunliffe Nov 29 '11 at 14:48

score 1 · Answer 15 · edited Dec 27 '11 at 20:52

1

Frame problems. iPad Safari will both hide scrollbars and expand frames to the size of their content. Changing the frame tag to include scrolling="yes" and noresize="noresize" appears to do nothing. Some sites look fine on everything, even a Dreamcast browser, but not on iPad. The issue can be fixed using tables and iframes instead of normal framesetting (cols and rows, etc).

edited Dec 27 '11 at 20:52

JJJ

32,902
20
89
102

answered Dec 27 '11 at 20:45

Andrew

1
1

score 0 · Answer 16 · answered Jun 22 '11 at 13:20

0

I also discovered that contenteditable is not supported in mobile safari, thus using a plain textarea is a better bet. Apple Developer Docs

answered Jun 22 '11 at 13:20

scunliffe

62,582
25
126
161

OZZIE · Answer 17 · 2013-06-17T12:34:12.010

0

position: fixed;

Does not work in iOS 4 but does work on iOS 5.

edited Jun 17 '13 at 12:34

answered Jan 04 '12 at 10:08

OZZIE

6,609
7
55
59

1

I don't think the iOS version is tied to the iPad model. – alex May 28 '12 at 01:46
1

I have changed my answer now :P – OZZIE Jun 17 '13 at 12:34

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

17 Answers17

Linked