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 comment:1
Changed June 13, 2010 06:59PM UTC by comment:2
| component: | unfiled → fx |
|---|
Changed August 14, 2010 06:52PM UTC by 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 comment:4
It took me weeks, but here is a patch for this problem:
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 comment:5
| keywords: | Chrome Animation → zoom position |
|---|---|
| milestone: | 1.4 → 1.5 |
| priority: | major → low |
| status: | new → open |
| type: | bug → enhancement |
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 comment:6
| summary: | Animation ussue in Chrome when page is zoomed → Calculate offsets correctly when the page is zoomed. |
|---|
Changed November 19, 2010 05:34AM UTC by comment:8
additional test case some really “interesting” stuff is going on here across all browser vendors…
Changed December 01, 2010 02:29AM UTC by comment:10
#7638 is a duplicate of this ticket.
Changed April 16, 2011 11:43PM UTC by comment:11
| resolution: | → patchwelcome |
|---|---|
| status: | open → closed |
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 comment:12
#10163 is a duplicate of this ticket.
Changed January 03, 2013 07:06PM UTC by comment:13
#13147 is a duplicate of this ticket.
Changed May 05, 2013 03:16PM UTC by comment:14
Try to set position:relative for wrapping div:
<div style="position:relative">
<div style="position:absolute"> <!-- Your animated div -->
</div>
</div>
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