Generally speaking, pop-ups are a bad idea. Pop-up windows take the focus from the current application – all of a sudden a new window pops up (that’s why it’s called a pop-up) and the original window loses focus and is usually hidden behind this new window. This can be difficult to manage by disabled people and creates accessibility issues.
We try to build user friendly applications as much as we can. As a convenience this little pop-up has a remember-my-position feature. Position (and size) of the window is stored in a browser cookie. This feature works fine on most browsers, however Internet Explorer has some quirks. To be more specific, IE pushes this window off its original position each time this window is opened.
Further investigation of this behavior revealed that this offset happens only if the window’s position is saved. Unfortunately, the JavaScript code was written to re-save window’s position each time this window was popped up, even if it did not move a pixel. Alright, that was fixed quickly. Now the problem was to figure out why does the window jump when its position is saved.
It seems that the offset happens when the window is moved to x,y (window.moveTo(x,y)) and then asked for its x and y (window.screenLeft and window.screenTop). Hence the following code will move the window diagonally down and to the right ten times.
for (var i=0;i<10;i++) window.moveTo(window.screenLeft,window.screenTop);
Did I mention that IE is broken? No? IE is broken. You don’t believe?! Figure this! When you call window.moveTo(x,y) the window dutifully follows your command and moves the upper left corner of the window to x and y on the screen. But when you ask it for its position it will try to fool you by giving you incorrect co-ordinates. And it will succeed. The window.screenLeft and window.screenTop is the only way to get the position of a window on Internet Explorer.
The reason for this offset comes from the difference in position of the browser window (outer window) and the document window (inner window).
pop-up.png
As described in the documentation:

  • The moveTo method moves the screen position of the upper-left corner of the window to the specified iX and iY position.
  • The window.screenLeft property retrieves the x-coordinate of the upper left-hand corner of the browser’s client area, relative to the upper left-hand corner of the screen.
  • The window.screenTop property retrieves the y-coordinate of the top corner of the browser’s client area, relative to the top corner of the screen.

Is there a solution? Yes, there is. But it isn’t ideal. What we could do before we saved this window’s position is to move it to the same position, then ask for its position again. Whatever the difference between the original and current position is, subtract it from the original x and y – that’s the value we want to save.
However, this solution has some drawbacks. First of all, the user will experience jumpiness of the window (caused by moving it only to figure out the offset). Second reason not to use this solution is the fact that you are not guaranteed that the offset of the inner window will be the same next time this window opens – a user can install some add-on that can affect the vertical gap (e.g. an extra toolbar) or can change the window theme that may result in thicker or thinner borders.
So, as you can see IE is broken and there is no real solution. No, wait! There is one. Don’t use pop-up windows. Problem solved.

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now

Fresh ideas, announcements, and inspiration for your team, delivered weekly.

Subscribe now