ipad problem

[traq]

hello,
I've got a Safari-on-iPad problem, in two parts:

part 1) layout issue: the two larger boxes in this image should be aligned horizontally (and are in other browsers), but the second is bumped down when viewed on an iPad:

http://www.custom-anything.com/sand/iPad.png

part 2) I don't have an iPad and, therefore, can't troubleshoot this. I would be most grateful to anyone who might be able to offer assistance. :)

the demo page link removed by user request, click on the "Search Page" button. Thanks!


----
Moderator's note: final solution is available here:
http://www.mindfly.com/blog/post/2009/07/10/Making-Inline-Blocks-Play-Nice-With-Webkit.aspx

[Nile]

You're going to want to download an iPad SDK that can be found here (http://developer.apple.com/devcenter/ios/index.action). Find the "Xcode and iOS SDK" link and login to your Apple account.

[traq]

mmm... I was going to say how completely awesome it was that Apple released iPad emulators for development, but then I found out that they only run on Mac. (Which makes perfect sense, but I'm more likely to buy an iPad than a desktop Mac. and I'm not at all likely to buy an iPad. Oh well...)

thanks anyway, Nile. That would have been helpful.

If anyone is willing/able to test for me, please let me know.

[djr33]

There's good news and bad news. First, iPads, if they are like iPhones (and I believe they are) don't actually have a special version of Safari. At least they do everything just like a computer except for some things that are disabled. (For example, downloading, "browse" buttons for file inputs in forms, plugins, etc.)

This means that your page should render identically in Safari (computer program) and Safari (iPad/iPhone app)-- probably especially iPad/iPhone, but the computer too I expect.

To test this, I tried Safari (v5) on my Macbook and it had exactly the same problem. So that's the bad news, or perhaps more good news: it's easier to test, though a more general problem.

As I said, I'm on a Mac, but I wouldn't be surprised if Safari for windows does the same thing. Have you tried it?
Since I'm not using a windows computer, I can't see if they're the same.

The browsers on iPhones/iPads are remarkable actually. They work really well, with things like complicated Javascript for example, and render just like a computer (as far as I've seen). The only problems I've found are accessibility: no right click, no non-click hover state, no drag, etc. So for that sort of thing, you may have iPad/iPhone specific issues, but if it can do something (such as render an element) it will probably do it in exactly the same way as a computer. In other words, things will be missing, but nothing should be broken. Personally I'd love some better accessibility options though, for when something requires a right click or whatever...

[traq]

hmm... I shall wander over to my laptop and download Safari/Windows.

[traq]

Daniel, when you look at it, is it always the same box that's out of place? I'm getting different boxes out-of-place each time I refresh the page, sometimes none are out of place. I see no pattern or "problem" box, and the markup for each box is consistent...

[djr33]

Yes and no-- consistently one image, but that image moves around. This is only a problem with one specific instance of the top box.

There are three different top boxes: the woman, the space station, and the night sky (with slideshow).

The space station, like in your screen capture above, is always out of place. It may be in either position (or neither), but wherever it appears it is out of place vertically like in your screen capture.

I'm guessing something is wrong specifically with that image/content/combination. If you're getting inconsistent results with that, it's very strange.

[ggalan]

why not just target the ipads css


<style type="text/css" media="only screen and (device-width: 768px)"> something here </style>

[traq]

@Daniel - I noticed that after my last post, but I have -no clue- how that image/content is different than any of the others. Additionally, I've seen some of the small boxes bump around, both when the big space station box is shown and when its not.

@ggalan - apparently it's not just iPad, but Safari in general. Besides, I don't even know what needs to be fixed, yet. :)

crap, it's happening on Chrome now, too. it never had before.

[traq]

WELL, i changed out the images and the problem stuck to the box, not the image. I couldn't see any way that that box was different, though... except that the paragraph was only one line long.

I added more text and now the problem shows up completely randomly.

[djr33]

I had a similar problem about a week ago and it seemed like the browser has having trouble determining the height/width of an element. Perhaps if you simply wrap it differently it will work better. This is just a general comment. I really have no idea what's wrong in this case.

[traq]

I've been thinking about it... the boxes shouldn't be having issues, since they have set dimensions and hidden overflow. the 160px image is simply floated left. maybe I'll impose dimensions (and padding) on the paragraph and see if that helps... thanks!

[traq]

...wOOOOOOOOOOOT! I love marking problems "resolved." especially when they're my problems :D

for anyone interested, here's the answer (http://www.mindfly.com/blog/post/2009/07/10/Making-Inline-Blocks-Play-Nice-With-Webkit.aspx). have a great day!