mouse pointer behaviour inside the viewer

Hi everyone,
these 2 screenshot sum up my problem. the blue square represents my cursor pointer. its geographic coordinates are labelled with this white text. (I got this coordinate on adding a mouse move event)
my problem is that I can’t have my mouse pointer (blue square) and my label text align until I scroll down my html document.
So I am wondering if someone has already faced such problem.

I used an iframe tag to solve this issue as the sandcastle demo do the same too.