Skip to main content

Bug Tracker

Side navigation

#5565 closed enhancement (patchwelcome)

Opened November 29, 2009 03:42PM UTC

Closed April 16, 2011 11:43PM UTC

Last modified May 05, 2013 03:16PM UTC

Calculate offsets correctly when the page is zoomed.

Reported by: evgenyneu Owned by:
Priority: low Milestone:
Component: effects Version: 1.3.2
Keywords: zoom position Cc:
Blocked by: Blocking:
Description

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

Attachments (0)
Change History (14)

Changed December 01, 2009 08:01AM UTC by evgenyneu comment:1

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

Changed June 13, 2010 06:59PM UTC by dmethvin comment:2

component: unfiledfx

Changed August 14, 2010 06:52PM UTC by dmethvin comment:3

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.

Changed August 25, 2010 09:57PM UTC by tetsuharu comment:4

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);

}

Changed October 23, 2010 11:39PM UTC by SlexAxton comment:5

keywords: Chrome Animationzoom position
milestone: 1.41.5
priority: majorlow
status: newopen
type: bugenhancement

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.

Changed October 23, 2010 11:40PM UTC by SlexAxton comment:6

summary: Animation ussue in Chrome when page is zoomedCalculate offsets correctly when the page is zoomed.

Changed November 13, 2010 07:27PM UTC by dmethvin comment:7

#2493 is a duplicate of this ticket.

Changed November 19, 2010 05:34AM UTC by snover comment:8

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

Changed November 19, 2010 05:36AM UTC by snover comment:9

#5183 is a duplicate of this ticket.

Changed December 01, 2010 02:29AM UTC by jitter comment:10

#7638 is a duplicate of this ticket.

Changed April 16, 2011 11:43PM UTC by john comment:11

resolution: → patchwelcome
status: openclosed

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".

Changed August 30, 2011 01:30PM UTC by rwaldron comment:12

#10163 is a duplicate of this ticket.

Changed January 03, 2013 07:06PM UTC by dmethvin comment:13

#13147 is a duplicate of this ticket.

Changed May 05, 2013 03:16PM UTC by ADeptus comment:14

Try to set position:relative for wrapping div:

<div style="position:relative">

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

</div>

</div>