Something that’s annoyed me for some years is that all the web sites I build don’t work quite right with my iphone. Scroll down a page, visit a link, go back, and safari jumps back to the top of the page. Very annoying. Pretty much no other site I visit seems to have this problem, yet I couldn’t figure out what I was doing wrong since I’m barely doing anything at all. There are some support forum complaints about similar bugs, but mostly from several years ago, and mostly “solved: it works now” without explanation.

Finally, figured out what seems to be the problem. The iphone introduces its own viewport meta tag, to define the screen dimensions, and control whether the user can zoom or not. A lot of sites abuse this to the point of unusability, so I very determinedly stayed clear. But without a viewport tag, safari is really dumb.

Without a viewport setting safari picks some defaults and renders the page to fit. They seem fine to me. The problem is that after leaving a page and coming back, safari has forgotten what size it picked, picks again, and then has to reflow all the page content. Even though it has picked exactly the same dimensions as the previous render. With the result that it forgets its scroll position and resets to the top of the page. Sigh. At least that’s what I’ve determined is going on.

So I finally broke down and added a viewport tag to the header. This required futzing with the CSS some more because now it rendered to a much smaller virtual canvas, but generally solvable.

Anyway, this frustrated me for a long time, I couldn’t find any useful information about it, and now it seems to work.