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.