Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FireFox animation issue #2144

Closed
TheDavidFactor opened this issue Mar 14, 2015 · 9 comments
Closed

FireFox animation issue #2144

TheDavidFactor opened this issue Mar 14, 2015 · 9 comments
Assignees
Labels
Milestone

Comments

@TheDavidFactor
Copy link

@TheDavidFactor TheDavidFactor commented Mar 14, 2015

I'm trying to "zoom" an absolutely positioned div out from the center of the page by using top, right, bottom, left percentages from 50% to 10%. After discovering the issue on my own site, I created a fiddle here: http://jsfiddle.net/3mmbz3ko/2/

I've tested in IE (Windows 7) chrome (Windows 7, Fedora 20, Ubuntu 14), FireFox (Windows 7, Fedora 20, Ubuntu 14), Safari mobile (iPhone 4) and chrome mobile (Android 4.4.2) and only FireFox (on all platforms) exhibits the issue: for about the first half of the animate the div moves left and up without growing. and then grows to full size from the new starting point.

Since it only happens in FireFox I thought it might be a FireFox bug, but it didn't start happening until after jQuery 1.7.2 so I decided to start here

@timmywil
Copy link
Member

@timmywil timmywil commented Mar 23, 2015

This is worth investigating.

@JohnRodney
Copy link

@JohnRodney JohnRodney commented Mar 30, 2015

You can get the desired behavior by animating width and height rather than right and bottom.

@Xesau
Copy link

@Xesau Xesau commented Apr 5, 2015

@JohnRodney How would that work with %-positions?

@JohnRodney
Copy link

@JohnRodney JohnRodney commented Apr 5, 2015

Well right equals left + width and bottom is top + height... maybe just implement the animation like that in Firefox only.

So if a top and bottom is passed then just animate top given and height as 100 - top+bottom... It seems annoying but the real issue is just animating css values when they aren't initialized.. it allows for undefined behavior which leads to inconsistent browser interpretation as far as I can tell.

@mr21
Copy link
Contributor

@mr21 mr21 commented Apr 21, 2015

Hmmm (IMHO) it's not a bug @timmywil.
There is something incoherent in what you want to do.
At first if you set left:50% and right:50% you have an element with a size of 0 right?
But you try to put an inner border of 3px on each side.
So you try to put an element of 6px large start at 50% of the left and termine at 50% at the right (and here it's incoherent).
If you remove the border, you will see no bug with your "zoom".
or if you replace border by outline you will see no bug too because outline (not inner).

Oh crap... I didn't test it on Firefox... I saw a tiny visual bug actually on Google Chrome and I thought it was the bug.

@timmywil
Copy link
Member

@timmywil timmywil commented Apr 21, 2015

@mr21 The issue here is the difference in behavior in FF. Removing the border doesn't alter the behavior in the test case. And I've confirmed that it works in 1.7.2. For some reason, we're adding about 100% to the right and bottom values during the animation.

@timmywil timmywil added this to the 3.0.1 milestone Jan 15, 2016
@timmywil timmywil modified the milestones: 3.1.1, 3.0.1 Jun 30, 2016
@mgol mgol self-assigned this Jul 18, 2016
@timmywil timmywil modified the milestones: 3.2.0, 3.1.1 Sep 19, 2016
@timmywil
Copy link
Member

@timmywil timmywil commented Sep 19, 2016

Pushing to 3.2.

@PurvaA
Copy link

@PurvaA PurvaA commented Nov 28, 2016

@TheDavidFactor

To fix 'animate' issue in Firefox

  • Detect Mozilla Browser

  • Write 'animate' method for Mozilla which is almost similar to 'animate' method for other Browsers. This 'animate' method have 2 additional CSS properties.

To elaborate this I created Fiddle.

Please check https://jsfiddle.net/ocLssfct/4/.

Also please let me know in case of any further queries/ concerns

@mgol mgol modified the milestones: 3.3.0, 3.2.0 Feb 13, 2017
@gibson042
Copy link
Member

@gibson042 gibson042 commented Aug 3, 2017

This stems from a difference in getComputedStyle between Firefox and other browsers when values are over-constrained—the former reporting post-adjusted used values and the latter returning absolutized but pre-adjusted (a concept which isn't even named by css-cascade-4, since the computed value of margin properties matches the specified value—and therefore remains a percentage when so specified).

In other words, Firefox is probably doing the right thing per CSS specifications.

http://jsfiddle.net/3mmbz3ko/17/

@gibson042 gibson042 added the CSS label Aug 3, 2017
@gibson042 gibson042 assigned gibson042 and unassigned mgol Aug 3, 2017
gibson042 added a commit to gibson042/jquery that referenced this issue Aug 3, 2017
gibson042 added a commit to gibson042/jquery that referenced this issue Aug 3, 2017
gibson042 added a commit that referenced this issue Aug 28, 2017
@lock lock bot locked as resolved and limited conversation to collaborators Jun 17, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
8 participants