Bug 18009 - Full Page Zoom: Javascript co-ordinates off-set
Summary: Full Page Zoom: Javascript co-ordinates off-set
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 528+ (Nightly build)
Hardware: Macintosh Intel OS X 10.5
: P2 Minor
Assignee: Dave Hyatt
URL: http://www.ebay.com/
Keywords:
Depends on:
Blocks:
 
Reported: 2008-03-22 01:27 PDT by Marc Nothrop
Modified: 2008-03-25 10:00 PDT (History)
1 user (show)

See Also:


Attachments
Screenshot showing off-set drop down menus (220.71 KB, image/png)
2008-03-22 01:39 PDT, Marc Nothrop
no flags Details
Screenshot showing off-set of Coda scrolling content panes (183.29 KB, image/jpeg)
2008-03-22 02:34 PDT, Marc Nothrop
no flags Details
Patch that fixes a bunch of DOM methods (7.93 KB, patch)
2008-03-24 15:34 PDT, Dave Hyatt
bdakin: review+
Details | Formatted Diff | Diff
Screenshot of proxy drag icon @ 100% (120.02 KB, image/jpeg)
2008-03-25 07:29 PDT, Marc Nothrop
no flags Details
Screenshot of proxy drag icon zoomed in (144.76 KB, image/jpeg)
2008-03-25 07:31 PDT, Marc Nothrop
no flags Details
Screenshot of 'download arrow' responding to offset icon (74.29 KB, image/jpeg)
2008-03-25 07:41 PDT, Marc Nothrop
no flags Details
Screenshot of 'FancyZoom' location offset (157.85 KB, image/jpeg)
2008-03-25 08:45 PDT, Marc Nothrop
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Marc Nothrop 2008-03-22 01:27:21 PDT
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.)
Comment 1 Marc Nothrop 2008-03-22 01:39:32 PDT
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.
Comment 2 Marc Nothrop 2008-03-22 02:28:38 PDT
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.
Comment 3 Marc Nothrop 2008-03-22 02:34:52 PDT
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.
Comment 4 Dave Hyatt 2008-03-22 03:13:26 PDT
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.
Comment 5 Dave Hyatt 2008-03-24 15:34:01 PDT
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).
Comment 6 Beth Dakin 2008-03-24 15:39:52 PDT
Comment on attachment 20015 [details]
Patch that fixes a bunch of DOM methods

r=me!
Comment 7 Dave Hyatt 2008-03-24 15:53:16 PDT
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.

Comment 8 Marc Nothrop 2008-03-25 07:27:32 PDT
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.
Comment 9 Marc Nothrop 2008-03-25 07:29:56 PDT
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.
Comment 10 Marc Nothrop 2008-03-25 07:31:47 PDT
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.
Comment 11 Marc Nothrop 2008-03-25 07:41:14 PDT
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)
Comment 12 Marc Nothrop 2008-03-25 08:41:54 PDT
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.
Comment 13 Marc Nothrop 2008-03-25 08:45:16 PDT
Created attachment 20030 [details]
Screenshot of 'FancyZoom' location offset

Screenshot shows pop-up 'FancyZoom' screenshots offset from the intended screen-centre.
Comment 14 Marc Nothrop 2008-03-25 09:27:35 PDT
(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. 
Comment 15 Marc Nothrop 2008-03-25 09:28:47 PDT
(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/
Comment 16 Dave Hyatt 2008-03-25 10:00:51 PDT
File a new bug for these issues. Thanks.