Unwanted border-bottom on .active nav-tab in Bootstrap 5 #41225
Comments
|
An animation of the issue: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
Prerequisites
Describe the issue
Description:
An unexpected border-bottom appears on the active
.nav-tabsitem in Bootstrap 5. This behavior occurs even in the official documentation examples. The issue seems related to rendering inconsistencies, as slight changes in layout (e.g.,paddingadjustments) affect the visibility of the border.Environment:
Steps to reproduce:
<body>.Screenshots:
<body>withpadding: 4rem<body>withpadding: 2remReduced test cases
Applying
margin: 1px 0to.nav-tabsseems to mitigate the issue:Possible cause?
This could be a browser rendering quirk, possibly due to subpixel rounding issues affecting how the tab's active state is calculated. It seems to be more noticeable in Firefox on Linux, but further testing is needed to confirm if this affects other environments.
Related issues (previous major versions of Bootstrap):
What operating system(s) are you seeing the problem on?
Linux
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.3
The text was updated successfully, but these errors were encountered: