Question

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.

Was it helpful?

Solution

it's a known bug in Opera that you can scroll to content that's meant to be overflow:hidden.

Now, if you handle the keypress event with JavaScript and call event.preventDefault() for arrow key presses, it will prevent scrolling. (Doesn't work to prevent the keydown event's default action, must be keypress). Does that help?

OTHER TIPS

Is this issue happening in safari as well? If so could it be a WebKit specific glitch.

Or perhaps specifying a max-height for that element could prevent that object from resizing your browser window.

Also source code would be nice too=)

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top