bug in IE7 when you change position of elements when pagezoom is used

In my humble opinion the pagezoom in IE7 is one of the most underestimated improvements of IE. Okay it has its flaws but it is a lot better then just resizing font-sizes. And imagine what you can do with it... now you can actually zoomin on the complete user interface of an application. I haven't seen any desktop application yet that can do just that.

But this pagezoom functionality also turns out to be one buggy $#%%^&$. (sorry for that)

What's wrong?
Just zoom your page to 125% and dynamically reposition an element with text in it. IE7 mispositions the text completely and it does it in a pretty random way. When you resize the browser window, after repositioning your element, IE7 will force some kind of redraw of the page and the problem will be corrected.

This a test page before repositioning:







this it what happens after repositioning the div 200px to the right:







You see what happens?! Even the text in the button is not rendered well!

Then resize the window:

And voila... all is fine....

For an working example click here. (don't forget to set the zoom level of the page)

What does that mean?
This makes for example drag&drop in IE7 within a zoomed page almost impossible.

The solution?
You tell me. I am still looking, i have tried a lot of options. The weird thing is that I haven't found any mention of this problem on the net. All the well known libraries don't seem to have a solution. I have checked YUI, mootools, pkk's new drag&drop script and backbase.

So if you have any idea let me know as soon as i find something I will publish it here.

added 14-8-2007 17:21
okay i have something that works... it is really ugly and needs to be improved (broswer detection, pagezoom detection, values relative to page) but it is a start:

function shakeItUp(){
document.getElementsByTagName("body")[0].style.height="10000px";
window.scrollBy(0,6000);
window.scrollBy(0,-6000);
document.getElementsByTagName("body")[0].style.height="auto";
}

After repositioning your element just shakeItUp()

click here for an working example