shadedecho
Programmer
I have a little widget/tool I'm building which creates some different boxes in the web page viewport, and uses position:fixed to keep them hovering anchored to the viewport, regardless of scroll or window resize.
I have style-expression hacks in place for IE6 (and IE7 in non-standards-doctype mode), and right now, my script works exactly as intended in all browsers and platforms I've tested, including win:IE6,IE7,FF1.5-3,Safari3.1,Chrome. But, for Opera (9.6), there's a small bug I'm trying to figure out how to workaround.
The position:fixed works fine for scrolling, it keeps the boxes in the right spot. But it doesn't seem to update their positioning if I do a window resize.
Curiously, though, I discovered, a little by accident, that if after a resize, I simply change the width/height of a box, that causes Opera to refresh its style and move the box to the correct position.
I've seen other similar scripts like jqModal and LightBox (and all its clones) and many of them don't seem to have this problem (or they worked around it some way). But I'm at a loss, thus far.
I thought about attaching to the window.onresize event (which does fire progressively as the browser window resizes, unlike FF which waits until it finishes!), but I still don't know what to do to force an update (other than changing the width by 1 px and then back again), and even then, it'd still be really choppy on refreshes.
Does anyone have any idea what might be wrong?
Also, if I place my position:fixed box (anchored to the right of the window viewport) directly as a child of the BODY element, it works fine in both scrolling and resizing.
If I place my position:fixed box inside another position:absolute (or position:fixed) box, for DOM neatness sake, then the inner box only updates its position with scrolling, but not with window resizing. Any ideas?
I have style-expression hacks in place for IE6 (and IE7 in non-standards-doctype mode), and right now, my script works exactly as intended in all browsers and platforms I've tested, including win:IE6,IE7,FF1.5-3,Safari3.1,Chrome. But, for Opera (9.6), there's a small bug I'm trying to figure out how to workaround.
The position:fixed works fine for scrolling, it keeps the boxes in the right spot. But it doesn't seem to update their positioning if I do a window resize.
Curiously, though, I discovered, a little by accident, that if after a resize, I simply change the width/height of a box, that causes Opera to refresh its style and move the box to the correct position.
I've seen other similar scripts like jqModal and LightBox (and all its clones) and many of them don't seem to have this problem (or they worked around it some way). But I'm at a loss, thus far.
I thought about attaching to the window.onresize event (which does fire progressively as the browser window resizes, unlike FF which waits until it finishes!), but I still don't know what to do to force an update (other than changing the width by 1 px and then back again), and even then, it'd still be really choppy on refreshes.
Does anyone have any idea what might be wrong?
Also, if I place my position:fixed box (anchored to the right of the window viewport) directly as a child of the BODY element, it works fine in both scrolling and resizing.
If I place my position:fixed box inside another position:absolute (or position:fixed) box, for DOM neatness sake, then the inner box only updates its position with scrolling, but not with window resizing. Any ideas?
