Skip to content
GitLab

Revamp accordion borders to fix pixel jumping

Merged Mark Otto requested to merge accordion-schmordion into main

This should fix the issue once and for all—this takes a simpler approach to the borders and seems to fix all the movement I could see (which was actually visible without even zooming in, at least in Safari).

  • Pushes the borders to the .accordion-item instead of the .accordion-button
  • Simplifies the .accordion-flush's border resets
  • Recreates the .accordion-button's border-bottom with an inset box-shadow
  • Moves the border-radius to the parent, which necessitated the new $accordion-inner-border-radius variable

Fixes #32250 (closed), closes #32251.

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