Calculate offsets correctly when the page is zoomed.

[evgenyneu]

Hello,

If you zoom a page in Chrome (Ctrl +) and try to move an absolutely positioned element with animate() function it sets its starting position incorrectly.

Please see the demo here: ​http://evgenyneu.vndv.com/animationissue/TestChrome.htm.

Best,

Evgeny

[evgenyneu]

Hello,

Just figured out that this is not jQuery problem, but it's a problem with Chrome. It returns getComputerStyle for the 'left' incorrectly when zoomed.

Best,

Evgeny

[dmethvin]

See comment on this page from Richard Fink:

​http://ejohn.org/blog/more-secrets-of-javascript-libraries/

Quoting excerpts:

IE8's Zoom made it impossible to distinguish between a browser window sized to say, 80% the width of the screen at 100% Zoom, and a browser window sized full-screen set to 125% Zoom. An informal whitepaper on the issue here: ​http://www.readableweb.com/forIEteam/IE8zoomanalysis.htm

The problem was addressed, thankfully, by having IE's screen.logicalX / YDPI properties report the recalculated dots-per-inch or "logical" pixel screen resolution currently being used by IE to calculate sizes.

Chrome and Safari allow for the detection of Zoom by comparing the value of: document.defaultView.getComputedStyle(document.documentElement, null).width;

which always returns the width of the window (documentElement) in device pixels (that is, the "unzoomed" pixels) with document.documentElement.clientWidth which returns the size of the window in logical pixels.

However, in FF, both properties return the same value (that is, the size of the documentElement in logical pixels) which makes them useless for comparison and thus determining Zoom level.

[tetsuharu]

It took me weeks, but here is a patch for this problem:

​http://gist.github.com/431639

copy/pasted here:

if ( /webkit.*mobile/i.test(navigator.userAgent)) {

(function($) {

$.fn.offsetOld = $.fn.offset; $.fn.offset = function() {

var result = this.offsetOld(); result.top -= window.scrollY; result.left -= window.scrollX; return result;

};

})(jQuery);

}

[SlexAxton]

Changing 'support for zoom' to an enhancement rather than a bug, since jQuery doesn't purport to support it... but a good addition, none-the-less.

[dmethvin]

#2493 is a duplicate of this ticket.

[snover]

​additional test case some really “interesting” stuff is going on here across all browser vendors…

[snover]

#5183 is a duplicate of this ticket.

[jitter]

#7638 is a duplicate of this ticket.

[john]

I'm not sure if this is something that we can reasonably fix (especially given all the cross-browser problems that exist). Going to flag as "patchwelcome".

[Rick Waldron]

#10163 is a duplicate of this ticket.

[dmethvin]

#13147 is a duplicate of this ticket.

[ADeptus]

Try to set position:relative for wrapping div:

<div style="position:relative">

<div style="position:absolute"> <!-- Your animated div --> </div>

</div>