Bug Tracker

#7488 closed bug (worksforme)

Opened November 12, 2010 02:58PM UTC

Closed November 12, 2010 07:27PM UTC

Last modified November 12, 2010 08:01PM UTC

.offset() function incorrect when ancestor uses -webkit-transform

Reported by: tomas@bliin.com Owned by: tomas@bliin.com
Priority: low Milestone: 1.5
Component: offset Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

When an element is transformed with the -webkit-transform attribute, the offset() function no longer works correctly for its child elements.

The -webkit-transform attribute is most notably used in Google Maps v3 on Chrome.

As a very restricted workaround, which ignores scale and rotation but at least works for Google Maps, you can do:

var pos = $elm.offset();                                       
$elm.parents().each(function(n,e) { 
  var wt = e.style.WebkitTransform;
  if (!wt) return;
  var match = wt.match(/translate\\((.+)px, (.+)px\\)/);
  if (!match) return;
  pos.top += parseInt(match[2]);
  pos.left += parseInt(match[1]);
});
Attachments (0)
Change History (6)

Changed November 12, 2010 03:15PM UTC by boushley comment:1

owner: → tomas@bliin.com
status: new → pending

Thanks for taking the time to contribute to the jQuery project. I've produced a jsFiddle case for this that seems to work just fine http://jsfiddle.net/boushley/TcbXf/ If you can give us a reduced test case showing the error, then we can work on the issue.

Changed November 12, 2010 03:18PM UTC by rwaldron comment:2

component: unfiled → offset
priority: undecided → low

Changed November 12, 2010 04:05PM UTC by tomas@bliin.com comment:3

status: pending → new

Thank you for your response.

While generating a test case. I seem to have localized the problem. I've reduced my project to contain only google maps and a balloon at http://remaptheworld.com/remap.dev/site/test.html .

The problem is still there but it is gone when you remove the reference to the dimensions plugin. Somehow that plugin interferes with the offset() functionality...

Changed November 12, 2010 04:25PM UTC by tomas@bliin.com comment:4

The problem can also be reproduced by adding the dimensions plugin to the above jsfiddle snippet by boushly.

I understand now that the dimensions plugin has become obsolete. It actually seems to do more harm then good.

I've included it in my project because the tootip plugin stated that it needed it. Maybe it would be good to remove the dimensions plugin from the plugin library or to clarify that it is obsolete, because currently it is listed and referenced by other plugins.

Changed November 12, 2010 07:27PM UTC by addyosmani comment:5

resolution: → worksforme
status: new → closed

Looking through the dimensions plugin I believe that as you mention it requires an update and is a cause of the issues you've been experiencing with offset() - offset() itself appears to be working fine. As such we will be closing this ticket with that as the reason. On plugins, we are currently re-doing the plugin site and will be relaunching it at some point with a cleaned list of plugins. Thank you for highlighting that this plugin is no longer usable with up to date versions of jQuery.

Changed November 12, 2010 08:01PM UTC by jitter comment:6

Well the dimensions plugin page states

>As of jQuery 1.2.6, the dimensions plugin has been merged into core.

And I guess this note is there for a long time now. So you should report to Jörn Zaefferer that he should remove the

>Depends on jquery.dimensions.js

note from http://docs.jquery.com/Plugins/Tooltip

tool tip homepage