I'm working on a simple game engine in Javascript (crazy, I know.) Screenshot from Opera: http://img406.imageshack.us/img406/5818/gamek.jpg Although it looks like a tile engine, it's actually object-based; each row or column of grey blocks is a single <div>, positioned relative to the viewing area (box with red border). The viewing area has overflow: hidden, so the objects don't show outside it.
However, Opera is still adding these objects' full heights to the total page height, even though most of it is clipped. It's curious because no scrollbar shows, and the blue outline around the <html> element doesn't move downward (nor if I put it on the <body> element). But when I press the down arrow, the page scrolls down, until the bottom of those objects would be on the screen, even though they're clipped. I can tell this is the case because removing those objects solves the problem, and as I move south in the game, the page scrolls back up, since the objects are moving back up and thus reducing the page height.
I'm using Opera 10, but had the same problem with 9. Firefox handles it just fine. How would I either solve or work around this problem? No CSS trickery I can think of has done it, and calling scroll(0,0) every frame is even worse - the page jumps to the "bottom", then back to the top.