Bug Tracker

Opened 10 years ago

Closed 8 years ago

Last modified 6 years ago

#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 10 years ago by 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

comment:2 Changed 9 years ago by dmethvin

Component: unfiledfx

comment:3 Changed 9 years ago by 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.

comment:4 Changed 9 years ago by 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);

}

comment:5 Changed 9 years ago by SlexAxton

Keywords: zoom position added; Chrome Animation removed
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.

comment:6 Changed 9 years ago by SlexAxton

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

comment:7 Changed 9 years ago by dmethvin

#2493 is a duplicate of this ticket.

comment:8 Changed 9 years ago by snover

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

comment:9 Changed 9 years ago by snover

#5183 is a duplicate of this ticket.

comment:10 Changed 9 years ago by jitter

#7638 is a duplicate of this ticket.

comment:11 Changed 8 years ago by john

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

comment:12 Changed 8 years ago by Rick Waldron

#10163 is a duplicate of this ticket.

comment:13 Changed 6 years ago by dmethvin

#13147 is a duplicate of this ticket.

comment:14 Changed 6 years ago by ADeptus

Try to set position:relative for wrapping div:

<div style="position:relative">

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

</div>

Note: See TracTickets for help on using tickets.