Fix accordion "jump"

[patrickhlauke]

open accordion button has a border of 1px, but a closed one suppresses the border-bottom-width:0. this caused an odd 1px jump on the accordion panel. now, the border width is transitioned at the same pace as the panel opening/closing transition, so no more perceptible jump

Closes #32250

Preview: https://deploy-preview-32251--twbs-bootstrap.netlify.app/docs/5.0/components/accordion/

[patrickhlauke]

as https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example doesn't seem to suffer from the same problem, this is v5 only

[XhmikosR]

I still notice a tiny jump on my machine :/

[patrickhlauke]

ah, i was fixated on the bump i was seeing on the panel itself, but seems the overall accordion as a whole also changes height by 1px overall of course due to that one 1px border of the one opened accordion. at this stage, no clue yet on how to tackle this...

[ffoodd]

@patrickhlauke Could using a transparent border instead of none be of any help here?

[ffoodd]

Basically:

.accordion-item:not(:last-of-type) .accordion-button.collapse {
  border-bottom-color: transparent;
}

Instead of:

.accordion-button.collapsed {
    border-bottom-width: 0;
}

Since there shouldn't be any height changes, transition should feel better.

[patrickhlauke]

@ffoodd ouais, j'aime bien ça 👍

will give it a try this morning

[ffoodd]

Just edited my suggestion, made a mistake! Merci 😉

[patrickhlauke]

unfortunately, that still doesn't quite solve it (and now for some reason the last accordion is missing the bottom border when collapsed)

think i'm going to leave this as is now until @MartijnCuppens has a chance to look it over ... feel free to push commits to this directly. also, the issue is easier to see when you zoom in, just for reference

[patrickhlauke]

setting to draft until we properly worked this out...sorry, thought it was going to be easier, but my CSS-fu is letting me down

[ffoodd]

I think border transition here should be dropped or tweaked since border-color is already in transitioned in $btn-transition with .15s.

That may be causing the jump.

I tried a fw things without seeing anything so I'm not quite sure about this, but maybe using $btn-transition overlaps with this custom border transition.

[patrickhlauke]

well adding this was needed initially to fix the issue when the border was not transparent and going from a width of 1 to a width of 0. the issue may have been the fact that it's transitioning at .15s, but the height was transitioning at .35s, leading to one perceptible jump

[patrickhlauke]

now that it's just a colour change that particular part is likely not causing a jump, but there's some fundamental other jump going on somewhere for the accordion as a whole now (i.e. it's not the panel content itself that's jumping visibly anymore, but everything else is...)

[ffoodd]

Thinking transition might be wrong. Keeping the transparent border should still help to ensure the height, but transition definetely needs some tweak

[XhmikosR]

@mdo: we also have #32278, not sure what's better but both solutions seem to have issues.

[mdo]

Compared to #32278, this is the cleaner fix for me when viewing in Chrome on my Windows machine. Going to close that one out and see if there's anything else we need to do to fix this up. As it stands now, this does appear like a fix for me.

[XhmikosR]

There's definitely still a bump on my machine with Windows 10, 175% DPI, FF/Edgium.

[patrickhlauke]

yeah i'm seeing a tiny bump still as well, and for the life of me can't quite work out why. wonder if this is coming down to weirdness related to hardware acceleration kicking in for the transition which is very subtly fuzzing up font metrics when it runs, or something

[XhmikosR]

@mdo maybe you have an idea how to really fix this?

[mdo]

See #33149 for a potential fix!

[mdo]

Closing for #33149