horizontal green { position: absolute; width: 10200px; left: -10000px; horizontal white { position: absolute; width: 31900px; left: -31500px; } horizontal red { position: absolute; width: 1000400px; left: -1000000px; } vertical green { position: absolute; height: 10200px; top: -10000px; } vertical white { position: absolute; height: 31900px; top: -31700px; } vertical red { position: absolute; height: 100000200px; top: -100000000px; }
Establishing how much we have to go on when we want something to stay "off-screen". Nothing can really go "off-screen", just be kept out of view. It's all about the end-result from those calculations...
The RED horizontal and vertical bars are stretched so far out that some browsers are bound to fail, just to see that there are limitations. Not a big deal if some browsers can't calculate those, but nice if they can though.
The WHITE horizontal and vertical bars are just within limits in some browsers. The values are drawn from a 2 byte integer divided by 2, which is logical.
The GREEN horizontal and vertical bars are set at safe values, +/-10000px. That's low enough values even for the most tricky or flawed integer-based calculator.
- Safari: OK.
- IE6: OK.
- Opera: OK, but horizontal RED lost (too wide).
- Moz/FF: OK, but vertical RED lost (too tall).
- IE5.0(win): OK, but extremely slow on calculations.
- IE5.2(Mac): OK, but horizontal and vertical RED flawed (too wide and too tall).
Conclusion: none of these browsers will have problems with normal "off-screen" styling, using position: absolute. I think most browsers base their calculations on 2 and 4 bytes integers, but I'm not sure. IE/win looked a bit "floating" if I stretched it too far, but that isn't included in this test-page. Anyway, they all can reach far enough for normal web design.
rev: 24.oct.2005: added 'html {display: table-cell;}' as a fix for Opera's lack of scrollbar on this testpage. Looks like a trouble-free fix.