Canvas Offset Misplaced

There is an error in the offset of the collection canvas if you hava a page that is longer then the screen size so that scroll bar are activated and you make a page refresh when the scroll bar is not at the top position. I can reproduce this problem on your test index.html page with FF17. Strangely its seems to work on IE9 with your test page but I have the issue when I use your script on other sites.

In my opinion the problem is related to the getBoundingClientRect() that return the coordinates given relative to window and not to the document. Maybe there is a smarter way to fix this but I've corrected the script in this way:

Adding this function:

function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()
    var body = document.body
    var docElem = document.documentElement
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft
    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0
    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft
    return { top: Math.round(top), left: Math.round(left), width: box.width }
}

and using this instead of elements[i].getBoundingClientRect():

var bounds = getOffsetRect(elements[i])

Hope this help!

Start with the test index.html page and locate the canvas offset calculation that calls getBoundingClientRect(). Reproduce the issue after refreshing a long page while scrolled, then verify the offset remains aligned with the document in Firefox and on other sites. Done means scrolling no longer displaces the collection canvas after refresh.