Or better titled, "Why does Mobile Safari suck so much?"

or, "Did anyone test this browser for the past few versions?"

This infernal browser definitely does not present the "real internet." Forget about trivial things like flash, I'm talking about just rendering pages to look like they're supposed to.

For starters the scaling is working in a non-uniform way, especially with fonts. It will scale some more than others. Some scale proportionally and some scale disproportionally.

The inconsistency is bloody friggen annoying! (to say the least)

On top of this, it manages to screw up background graphic and block element positioning and sizing due to what I suppose are rounding errors (or lack of precision). If you have a nicely laid out site with puzzled-together elements you'll definitely see cracks (lines) start to appear between pieces plus some scaling at factors ever so slightly greater than others.

Let's take a look at a practical example: My new basic site template. This is being worked up to be generic, but currently includes some graphical elements that are specific to an iPhone-themed games page.

Ignore the screen shot images and any baby or other bottle images - those are just placeholders for now. So too with most of the text because I'm waiting for final text to be written up by the friend who will receive the design for his site.

The site is working beautifully in the desktop browsers I've had the chance to test it in so far: Safari 3.x/Mac, Firefox 1.5/Mac, Firefox3/Mac, IE6/Win and IE7/Win.

If you view it on an iPod Touch or iPhone you'll notice right away that the left and right sides of the navigation rectangle get all screwed up. The background image on the left side actually has a tendency to get pretty mangled. Scaling you can also see seams appear in various locations in the nav as well as at the bottom of the page where I apply a little cap with rounded corners (to finish it off).

Firefox3 does whole-page scaling and for the most part does everything correctly. It simply scales everything up/down proportionally. It does have some drawing/rendering bugs that can be seen when you scroll the page side to side while looking at the nav rectangle (make the rectangle go partially off the window edge and then back on.

Back to Mobile Safari... The cracks between page elements can also be seen on Apple's own site, however they're harder to notice because they're using predominantly light colored graphics on a white background. Those hairlines practically disappear and you have to look at other areas like rounded corner graphics and the grey nav along the top to see the rendering problems.

I could play with background colours on my template to try and hide the seams in some places as well, but it would be a lot of work and would never be 100% especially in a more visually complex area like the nav.

Take a look at the page for VIRUS and see that the text next to the Virus logo is smaller than all the other text on the page? This is one of those discrepancies in font scaling. That text actually appear with the exact same layout as on every other browser. That means it's being rendered at the correct proportions compared to the graphics and then being scaled at the same proportions as well.

Most of the rest of the text on the page isn't. The bullet list for instance doesn't appear with the same layout as seen on desktop browsers. It's already been scaled to a greater factor. Yes, it's easier to read, but it breaks the layout when looked at as a whole.

I really don't mind the extra text scaling, but why is it only applying to SOME text and not all? Consistency would make this issue livable.

The text on the top right I mentioned above is constricted to a div that's 300 pixels wide with auto height. It's that restricted width block element that's causing the text to keep its proportions and not be altered like the text in other areas. Changing the width to 400 causes the size to go up slightly and 600 even more.

Arrrgh.

I can trick Mobile Safari by creating a CSS ruleset just for it and then specifying that particular offending type region at a much larger font size (23 pixels to be exact) to make it the same size as the text elsewhere. But what a kludge.

If anyone has any ideas on something I might be able to do to lessen or eliminate the random cracks between elements I'd love to hear it. The fact that it seems to be a rounding issue when rendering makes it the most problematic of all because the visual errors keep changing as you magnify and shrink the view.

If Hugo is reading... please buy some big heavy boots if you don't already have some, put them on, go to work and kick someone from the Mobile Safari team in the ass for me please.

I agree that there are some issues with the way Mobile Safari displays web pages.

But I have to say... You gain a much better appreciation for it once you've seen any of the Windows Mobile IE versions try to display a complex web site. I've given up on trying to make my web sites work in mobile IE.

Honestly, I think Mobile Safari did a pretty darn good job of managing all the compromises needed for that kind of situation. Mobile Safari is is the reason I bought an iPod Touch and later an iPhone: It was the only pocket browser that got me close to being able to browse the web decently.

I happen to like some of the non-uniform stuff that Safari does, because it makes the text more readable on the smaller screen. I understand how it might make cracks appear in a puzzled-together web site, though, and yeah, that's annoying. My solution would just be to design the site so it more or less works on iPhones, but without trying to do any special-case code for the iPhone. As long as the site is navigable, readable, and not hugely messed up on the iPhone, I'd say that was good enough.

I'm with Tony on this, I'm amazed just how usable Mobile Safari makes the web on a small screen. I'm more than happy to forgive it its lack of Flash and the occasional layout or scaling oddity.

I'll admit that I've never used Mobile Opera (never could get it to run on my WM6 phone) but Safari is so far ahead of Mobile IE.

I'm also happy for it to keep breaking the odd layout in future versions as long as it keeps its almost magical ability to make the mobile web usable. Quite how it knows where I am pressing my fat fingers, I don't know...

By the way, I think your main template looks great on the iPhone.

Yeah, there are a couple of very tiny seams. Funny how the seams change and appear/disappear based on zoom level. Yeah, that's a kind of buggy rounding-error thing on the iPhone probably. But the site looks more or less the way you intended it to look, which is more than you'd be able to say for Mobile IE.

Other than Safari on the iPhone/iPod Touch, the only portable browser I can bear to use is the one that comes on the Nokia N95. It does a pretty good job of rendering most sites, but not nearly as good as Safari.

I just realized that I likely had the whole navigation area disabled when I wrote the post here.

If you didn't see a metallic grill at the top with product icons, then you missed the nav. That's where most of the Mobile Safari bad-stuff happens.

On a completely non-rendering note, I'm noticing Safari just quits out at random times. I'll be reading a page, scrolling it up and down and the poof, back to the home screen. Come back to Safari and the page reloads and the back browser history has been wiped.

Other than these random quits (or crashes) I also notice that when you switch between "tabs" that the page you select needs to reload. Arrrgh. Same when you go back and forward pages. This browser seems to implement no caching. Great design decision for a mobile device.

Yeah, see what you mean. Funny how the misaligned sections are different depending on the zoom level. At some zoom levels they look just fine, at others, horribly misaligned. Wonder why.



Yeah, it tends to crash once in a while.

It's slightly less prone to do that since the last software update, but it still happens to me once in a blue moon.

Those random crashes seem to mainly happen when it just runs out of memory (the crash dumps indicate that there is no free memory left). As soon as I stopped having half a dozen complex websites open at a time the crashes became very occasional rather than frequent...

It could do with a little more memory in hardware version 3.



Hmm, ok. Firstly it definitely does do caching, if you load a simple webpage that has lots of images you will see that there is plenty of caching going on. What it doesn't appear to do is to cache the rendered version of the page, presumably in an effort to keep memory usage down.

That means if you have a page with complex rendering the pages will render slowly enough that it appears there is no caching.

Unfortunately, lovely as your website is, your designs definitely fit into the "complex rendering" category. Despite that I'd still be perfectly happy hitting your site with Mobile Safari, it loads quickly enough and looks good.

The Nokia N810 isn't a "pocket device" so to speak, but with 800x400 resolution and a Mozilla browser (with flash support) it's pretty nice. I have the older N770 that doesn't do flash (Opera browser I think), but I love the large screen. Funny thing is, I DO end up zooming it most of the time to read text so that's why I'm not too worried about going to a lower resolution with the iPhone (if I end up getting one).

You can reflash a 770 with OS2008.