2

I would be grateful for some pointers on how to troubleshoot this problem. Quick summary of the situation:

  1. I have a large document (200K) divided into five main sections of inequal length, each of which corresponds to a jQuery UI tab.
  2. The page works perfectly in Safari for Windows, Safari for Macintosh, Opera, Firefox, Chrome, and IE.
  3. The page used to work on the iPad too but it no longer does, and it's the iPad that has changed, not the page.

On the iPad, the tab-content is now getting cut off. E.g. one of the pages is a glossary that runs from A-Z and the page cuts off at the letter -H-. It used to scroll all the way to -Z-. For some reason, iPad Safari is not giving each Tab the full amount of vertical space it needs for its content.

I've looked at the jQuery UI code for the show tabs and it appears to be changing CSS classes hide/show, but I'm no ninja javascript coder. How do I begin to figure out what's wrong on the iPad when my page works as expected on every other browser?

EDIT: The page seems to be working fine on the iPad2. It could be a caching issue and the page might stop working at some point even on the iPad2--I could only test at the Apple store. But I believe the markup and coding and jQuery ui are essentially OK, and it's a iPad Safari issue.

Tim
  • 5,371
  • 3
  • 32
  • 41

2 Answers2

0

I'm sure this isn't the answer you're hoping for, but it sounds like a bug that should be reported to Apple.

You have a page that works perfectly on every other browser and I think its in Apple's best interest that it works on the iPad as well.

There might be other pages out there that used to work, but now don't, so I would consider this bug to be pretty high priority.

Erik B
  • 40,889
  • 25
  • 119
  • 135
  • the page does validate as 4.01 Strict, and does work perfectly everywhere else, so I'm leaning towards reporting it to Apple as a bug. But first I was hoping to get some corroboration from the members of the jQuery UI community who take pains to make sure their pages work on iPad (and also frequent StackOverflow). This could be a known issue now, but I doubt many people are using tabs in the extreme way I am, i.e. to organize a multi-section 200K document. It's probably a scenario few developers will have encountered. – Tim Apr 08 '11 at 15:26
0

I can't trouble-shoot myself without the code, but the by far best way to trouble-shoot situations like this is to use a tool called Weinre. Obviously if one browser (the iPad's) is having trouble, you need to troubleshoot directly with it. That's difficult since the iPad doesn't have developer tools, but Weinre can actually give you (most of) that, over the network.

Follow the instructions here, but at the least you need to provide a ~/.weinre/server.properties that contains this:

boundHost:    -all-
httpPort:     8081 
reuseAddr:    true 
readTimeout:  1 
deathTimeout: 5

That will tell weinre to listen on every IP on the port 8081. Start Weinre (via the OS X runner or with java -jar weinre.jar on the command line.

Then you add a special script tag in the main page:

<script src="http://YOUR_IP_NUMBER:8081/target/target-script-min.js"></script>

After this you start Safari or Chrome and go to http://localhost:8081/client/. If everything went as planned you will see the Weinre interface, which is a subset of the WebKit developer tools.

Now connect to your development machine with the iPad or simulator. If the script tag is correct Weinre makes a connection to the iPad and you have a fairly large subset of WebKit's developer tools at your disposal for trouble shooting. Good luck!

Jacob Oscarson
  • 6,363
  • 1
  • 36
  • 46
  • Tack så mycket. I note that the weinre page says "source level debug of JavaScript is not possible" with its tools, and that's probably where the problem is going to be. But a very helpful reply. – Tim Apr 15 '11 at 10:41