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

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

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.

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

Answer 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

Answer 5

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

Answer 6

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>