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

Answer 1

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

Answer 2

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 3

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

Answer 4

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.

Answer 5

position: fixed; 

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

Answer 6

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.