Bug 18009 – Full Page Zoom: Javascript co-ordinates off-set

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Marc Nothrop]

When zoomed via Full Page Zoom in WebKit r31224 (Cmd-+ once) some Javascript co-ordinates appear to be off-set from the origin, causing alignment issues with reveal effects, drop down menus etc.

On the eBay home page see the Category drop down menu (a#BrowseCategories) for which the drop down menu appears 34px too low, no longer appearing to be attached to the header toolbar.

The global navigation box in the top right hand corner (table.pnav) also shows off-set issues; hover over the "Buy" option and the resulting drop down menu is off-set 7px down, and 134px to the right (as shown in attached screenshot.)

[Marc Nothrop]

Created attachment 19962 [details]
Screenshot showing off-set drop down menus

Screenshot shows off-set of the "Categories" drop down menu and inset shows the off-set of the "Buy" drop down menu.

[Marc Nothrop]

Further examples at http://www.panic.com/coda/

1. Scroll to bring side-scrolling, tabbed 'feature area' into view (tabs: Sites, Files, Editor etc.)
2. Click "Files" tab, and accompanying content scrolls into view.
3. Zoom via Cmd-+
4. Result is that the scrolling DIV content for the content box is misaligned within the viewport; showing clipped "Sites" (sites-pane) content to the left, with the "Files" (files-pane) therefore clipped on the RHS.

Once you scroll off the first content pane, positioning will be affected by zooming; e.g. click "Editor" and zoom 'out' and the left origin of the "Editor" content is set back to the left of the viewport, thereby clipping ~1/3rd of the content, and almost half of the next content pane (Preview) is visible on the RHS.

[Marc Nothrop]

Created attachment 19967 [details]
Screenshot showing off-set of Coda scrolling content panes

Screenshot shows www.panic.com/coda with the 'features box' scrolled to the
"Files" pane; content is misaligned for the viewport.

[Dave Hyatt]

Will have to figure something out here.  The problem is that all the math is zoomed, but then setting .style based off that zoomed math results in a "double zoom" of the offset coordinates.  There's no option really but to lie to the page about box dimensions.  This is unfortunate.

[Dave Hyatt]

Created attachment 20015 [details]
Patch that fixes a bunch of DOM methods

This patch fixes all of the IE DOM extension methods (offset***, client***, scroll***).  It makes sure that an object that changes zoom becomes an offsetParent.  It also makes sure that all coords are adjusted back into document space for return by the DOM, and it makes sure that scrollLeft/Top are updated properly when the rendering space changes (thus keeping scrollLeft/Top locked at the same position in document space).

[Beth Dakin]

Comment on attachment 20015 [details]
Patch that fixes a bunch of DOM methods

r=me!

[Dave Hyatt]

Fixed in r31257.  There will undoubtedly be more issues with DOM coordinates.   We can handle these with individual bugs for each affected site though.

I verified that ebay.com and panic.com/coda now work properly.

[Marc Nothrop]

Not sure if this should be a separate bug, but there are other related issues:

On www.panic.com you can drag any of the application icons (centre page) to the green arrow (top right), to download the relevant app.

During the drag a semi-opaque icon appears beneath the cursor (simulating a Finder file drag.) When initiating the drag (mouse-down) the proxy icon is centred on the cursor location (irrespective of where on the icon the user actually clicked), and tracks consistently with the cursor until dropped (mouse-up.)

To complete the download, the icon must be dragged over the 'download arrow' which turns blue to indicate the icon can be dropped/released.

When zoomed in the icon appears offset down and to the right of the cursor (i.e. the presumed cursor centre is miscalculated), and when zoomed out the drag proxy icon is offset up and to the left. 

Additionally the 'download arrow' will not focus (change blue and initiate the download) when the cursor is over it, but rather only when the proxy icon is above the arrow.

[Marc Nothrop]

Created attachment 20026 [details]
Screenshot of proxy drag icon @ 100%

Screenshot show how when dragging (mouse-down) an application icon, a semi-opaque proxy icon is centred beneath the moving cursor.

[Marc Nothrop]

Created attachment 20027 [details]
Screenshot of proxy drag icon zoomed in

Screenshot shows proxy icon offset from the cursor when zoomed in via Full Page Zoom.

[Marc Nothrop]

Created attachment 20028 [details]
Screenshot of 'download arrow' responding to offset icon

The 'download arrow' only highlights for the proxy icon (i.e. assumes the icon is centred on the cursor)

[Marc Nothrop]

REGRESSION:

The pop-up (lightbox) screenshots on www.panic.com (using FancyZoom, see http://www.cabel.name/2008/02/fancyzoom-10.html for more examples) are offset from the intended screen-centre, at all zoom levels in r31275.

[Marc Nothrop]

Created attachment 20030 [details]
Screenshot of 'FancyZoom' location offset

Screenshot shows pop-up 'FancyZoom' screenshots offset from the intended screen-centre.

[Marc Nothrop]

(In reply to comment #8)

See also: http://demo.script.aculo.us/ajax/sortable_elements and http://demo.script.aculo.us/shop (drag product proxy icons, like Panic.com application icons.) In both cases the on-mousedown dragged elements exhibit a variable off-set from the cursor, at all zoom levels in r31275.

The further from the origin you drag the floating objects, the further the proxy objects are off-set from the cursor; dragging below the origin will cause the proxy object to progressively move further down away from the cursor, and dragging above the origin will cause the proxy object to move further up and away from the cursor. A continuous drag down below, and then up above the origin point of the 'drag-enabled' element will show the variability of the proxy object off-set from the cursor. 

[Marc Nothrop]

(In reply to comment #12)
> The pop-up (lightbox) screenshots on www.panic.com (using FancyZoom, see
> http://www.cabel.name/2008/02/fancyzoom-10.html for more examples) are offset
> from the intended screen-centre, at all zoom levels in r31275.

See also: http://www.huddletogether.com/projects/lightbox/

[Dave Hyatt]

File a new bug for these issues. Thanks.