Transforms on elements in the map's parent chain throw off getScreenCTM

[grayb]

I'm having an issue that seems to be Firefox related - this problem doesn't occur in Chrome or Safari.

I'm using javascript and transforms to make a 'sliding window' of viewable pages, much in the manner below. So when my user switches to page 2 I transform all of the page divs to the negative value of the page width, thereby showing page 2. so on a page with 1000px width, invoking the 'next page' on page one will transform all the page divs by -1000px.

This works great with Polymaps, except that my scrollwheel zoom always causes my map center to be thrown way off when viewing anything but the first page.

I've determined the error to be coming from polymaps.js line 508 in the function map.mouse(). Using the getScreenCTM causes the point returned to be way negative since when we are on page two, a parent div of our map container has a -1000px (or whatever width) transform. This causes the center point of my scrollwheel zoom to be very 'right' of where I actually click, and most times zooms the image out of the viewable map container.

Any help is appreciated :)

<div class="page_viewer">
    <div class="page_1" style="width: 1395px; left: 10px; top: 10px; height: 747px; -moz-transform: translate(0px, 0pt);">
        <figure class="image processed" data-aspect="1.3506" data-columns="50%" data-position="t" id="body_fig_9_1" style="width: 863.333px; height: 657.222px; margin-left: 40px; margin-top: 20px;">
        <div class="figureContent" style="width: 863.333px; height: 639.222px;">
            <div id="map_osci_body_fig_9_1" style="width: 100%; height: 100%; position: relative; background-color: rgba(0, 0, 0, 0.8);" data-collapsed="true" data-svg="/sites/default/modules/osci/images/ste_adresse_linepaths.svg" data-figure-id="osci_body_fig_9_1" data-ptiff="/opt/iip/images/ste_adresse_linepaths.ptif" data-zlm="6" data-ih="1777" data-iw="2400" data-node="22" class="iipmap">
                <svg class="map">
                ....
                </svg>
            </div>
        </div>
        </figure>
    </div>
    <div class="page_2" style="width: 1395px; left: 10px; top: 10px; height: 747px; -moz-transform: translate(0px, 0pt);">
        <figure class="image processed" data-aspect="1.3506" data-columns="50%" data-position="t" id="osci_body_fig_9_2" style="width: 863.333px; height: 657.222px; margin-left: 40px; margin-top: 20px;">
        <div class="figureContent" style="width: 863.333px; height: 639.222px;">
            <div id="map_osci_body_fig_9_2" style="width: 100%; height: 100%; position: relative; background-color: rgba(0, 0, 0, 0.8);" data-collapsed="true" data-svg="/sites/default/modules/osci/images/ste_adresse_linepaths.svg" data-figure-id="osci_body_fig_9_1" data-ptiff="/opt/iip/images/ste_adresse_linepaths.ptif" data-zlm="6" data-ih="1777" data-iw="2400" data-node="22" class="iipmap">
                <svg class="map">
                ....
                </svg>
            </div>
        </div>
        </figure>
    </div>
</div>