#5565 closed enhancement (patchwelcome)
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
Change History (14)
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
Component: | unfiled → fx |
---|
comment:3 Changed 12 years ago by
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.
comment:4 Changed 12 years ago by
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);
}
comment:5 Changed 12 years ago by
Keywords: | zoom position added; Chrome Animation removed |
---|---|
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.
comment:6 Changed 12 years ago by
Summary: | Animation ussue in Chrome when page is zoomed → Calculate offsets correctly when the page is zoomed. |
---|
comment:8 Changed 12 years ago by
additional test case some really “interesting” stuff is going on here across all browser vendors…
comment:11 Changed 12 years ago by
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".
comment:14 Changed 10 years ago by
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