Question

I have a very perplexing problem. A site I’m developing looks fine on iPad, desktop Safari with the iPad user agent, and iPhone. In other words, most devices with Mobile Webkit.

Somehow, though, it looks different on iPad 2. Here are the differences:

iPad 1

iPad 2

===

So as you can see, the layout somehow breaks on the iPad 2 in that center column.

You can check it with this URL: new.studyusa.com

Please note, as far as I know, both iPads are running iOS 5.0.1. I couldn’t think of anything else to check.

Obviously, the best help would be a response with what could possibly account for this. But it would be almost as helpful to check this from your iPad and let me know which comes up, as I’ve only been able to test this on one of each model.

Thanks.

Answer 1

Okay. This is really embarrassing, but it turns out that the iPad2 version was on iOS 4.3.3, and somewhere between that iOS version and iOS 5 (the one with the correct layout), the Mobile Safari rendering engine changed a pretty important thing:

The first headline in the screenshot for iPad 2 is an h1 and the second is an h2. The closing tag for the h2 was h1. So it was as follows:

<h1></h1>
<h2></h1>

Then iOS 4.3.3 didn’t treat the h2 as being closed, and therefore the following <div>s were treated as part of the h2.

Note: I only answered this because I hope that if someone makes a stupid error like mine, they find this.