iphone / ipad compatible web design - resources?

[MuGeN]

hi guys,

wondering if anyone can recommend a decent reference site to help me get round the quirks of iOS safari?

on the whole there are no problems, but there are some bits and bobs I don't understand such as the "hairline bug":

this is the one that sticks out in my mind, adding in tiny gaps where they are not wanted...

anyone offer any assistance? recommend a decent reference?

 

[MuGeN]

It's an interesting read, but for now I'm trying to find why lovely well written CSS displays issues like above and how to get round them...

Tbh I'm more than happy with browsing full sites from my iPhone never mind the iPad so I'd prefer not to write whole new layouts if I can learn how to tweak the proper ones to look perfect

 

[MuGeN]

that particular bug is what annoys me... i have no idea how to tweak it away since its not actually an offset pixel or anything (if you zoom in a bit, it disappears, a bit more, it comes back) and its always a hairline never gets thicker - yet if you are working from a sprite (multiple graphics in one file selectable with background-position) you do see some spillover from neighbouring graphics

Heres the issue on the ocuk site (its apparent on pretty much all sites you can go on...) so i'd love to know what the fix is, dont mind using separate stylesheets or whatever I just want a way around it...

 

[MuGeN]

hmmmmmmmmm

this certainly seems related, although its not always when there are rounded corners... it happens all over the place when viewing sites on my ipad or iphone...

i think, that it is an iOS Safari bug that this settings happens to fix...

investigating...

 

[MuGeN]

right... had a good play...

this setting does not fix problems such as above, however, it does help (but not completely eliminate) when sprites are involved...

see here on a popular shop, they are using sprite based graphics (as do a lot of sites):

(as viewed on my ipad)

the problem shown here, i'm sure, would be helped (when i say helped, the problem is lessened, but the lines still pop up at certain zoom levels) by the "-webkit-background-clip: padding-box;" parameter...

so... when its not sprite based, and just looks like non seamless joins between objects on the page, i still have no answer, but when its a background-position controlled sprite element, the webkit code helps.

c'mon folks lets sort this bugger out cuz its making our sites look bad on devices that are getting ever popular!