624524 - <detail> collapse animation looks wonky

Status: VERIFIED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P2)

Description

[Erik Rose [:erik][:erikrose]]

In 2.4, the entirety of the <details>'s contents would slide up or down when clicking the <details> element. Now something different--and ugly--is happening. It's hard to describe. An example is at /de/localization.

This regressed between 2.4 and 2.4.1.

Comment 1

[Paul Craciunoiu [:paulc]]

I've downgraded jQuery to 1.4.1 locally and this no longer happens. Looks like a regression in jQuery.

Comment 2

[Paul Craciunoiu [:paulc]]

I filed a ticket with jQuery: http://bugs.jquery.com/ticket/7960

Comment 3

[James Socol [:jsocol, :james]]

Thanks for taking initiative on this Paul. Hopefully it's easy for them to track down. Feel free to un-/reassign once we've figured out where the problem is.

Pushing out until we know if this is a jQuery bug or something we did.

Comment 4

[Ricky Rosario [:rrosario, :r1cky]]

Is there a reason for the inline style on:
`<summary style="display: inline">`

Removing that makes it better. Other than that, it looks like the default easing changed for the animation. Or maybe there was no easing at all before.

Looking at docs for slideToggle:

"As of jQuery 1.4.3, an optional string naming an easing function may be used. Easing functions specify the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear"

So we probably can just change to 'linear' and it will behave as before.

Comment 5

[Erik Rose [:erik][:erikrose]]

I don't think it's the easing thing: the wiki document edit page's disclosers animate properly.

As for the "inline": rats! I didn't mean to leave that inline. It exists to make the mode selection buttons appear next to the readout titles rather than below them. *moves that to dashboards.css* Good eye!

Comment 6

[Erik Rose [:erik][:erikrose]]

Fixed in http://github.com/jsocol/kitsune/commit/9632c2b42a77073531938e1fddc5d25a9f98252d.

Comment 7

[Paul Craciunoiu [:paulc]]

(In reply to comment #2)
> I filed a ticket with jQuery: http://bugs.jquery.com/ticket/7960
Added a comment to the ticket with Ricky's example, hopefully they will fix the display: table wonkiness. Thanks Ricky!
Apparently this has gotten different degrees of wonky since about jQuery 1.2.6!

Comment 8

[Rebecca Billings [:rbillings]]

Much smoother, gliding action in the collapse/re-open animations on various locale versions of the localizer & contributor dashboards.