Weird Accordion Jump Glitch in Menu Customizer

[mrahmadawais]

Tonight while testing the new Menu Customizer I found out that when an accordion is open and you click open another one, it jumps in a weird fashion, which seems like a glitch.

If you look at the speed at which an accordion opens up and the speed at which the last accordion moves up or down, you'll notice a big difference, and that's where the glitch is.

[helen]

Thanks for the screencast mrahmadawais, very helpful. This is really janky feeling - let's see if we can smooth it out for 4.3.1.

[mrahmadawais]

Replying to helen:

Thanks for the screencast mrahmadawais, very helpful. This is really janky feeling - let's see if we can smooth it out for 4.3.1.

Looking forward!

[tyxla]

Fixing the Menu Customizer accordion jumping issue

[tyxla]

See 33360.patch.

This one removes the min-height: 120px;, which was causing the issue. Additionally, the patch adds a transition to the accordion title - this adds some eye-candy when expanding/collapsing (the transition time equals the expand/collapse animation time).

Can anyone recall why the min-height is there in the first place?

[celloexpressions]

I believe the height-setting that is done in JS supersedes the need for that min-height.

Can we get an after screencast for comparison?

[mrahmadawais]

Screencast #2 after removing min-height.

[mrahmadawais]

Replying to celloexpressions:

I believe the height-setting that is done in JS supersedes the need for that min-height.

Can we get an after screencast for comparison?

Just added one. Looks fine, but the closing behavior of content area can be slowed down a little. Maybe by introducing a .closing class with opening one?

[afercia]

Replying to celloexpressions:

I believe the height-setting that is done in JS supersedes the need for that min-height.

I think on small screens (and in landscape orientation) there's the danger letting JS handle the height will set a very small height on the scrolling div, maybe min-height was there to always have an acceptable minimum height?

[samuelsidler]

Sadly, we don't have a patch here yet. If someone wants to work up a patch we can still consider it for 4.3.1. In the mean time, however, I'm punting this to 4.3.2.

[tyxla]

Actually, there is a patch: 33360.patch, which works decent on all devices I've tested it on. Is there anything else that should be addressed here?

[westonruter]

It seems there is outstanding feedback from @mrahmadawais and @afercia that have not yet been addressed in the patch. Or is everyone satisfied with the patch?

[mrahmadawais]

Replying to westonruter:

It seems there is outstanding feedback from @mrahmadawais and @afercia that have not yet been addressed in the patch. Or is everyone satisfied with the patch?

Thanks @westonruter. I tested the patch, seems to be working fine at my end.

[westonruter]

In 34219:

Customizer: Smooth animation for closing accordions in the available nav menu items pane.

Props tyxla.
Fixes #33360 for trunk.

[westonruter]

In 34220:

Customizer: Smooth animation for closing accordions in the available nav menu items pane.

Merges [34219] from trunk.

Props tyxla.
Fixes #33360 for 4.3.

[westonruter]

Regression: #34125.

[westonruter]

In 34829:

Customizer: Fix moving focus to available nav menu items search.

Fixes regression introduced in [34219].

Props tyxla.
See #33360.
Fixes #34125 for trunk.

[westonruter]

In 34830:

Customizer: Fix moving focus to available nav menu items search.

Fixes regression introduced in [34219].

Cherry-picks [34829].

Props tyxla.
See #33360.
Fixes #34125 for 4.3.