Erroneous border-radius inside Pagination

[tysongach]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I just upgraded to v5.2 and am seeing an issue with border-radius being applied to Pagination page-items:

As a gut check, I looked at the compiled CSS on the Bootstrap v5.2 doc website, which has…

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}

…whereas my compiled CSS has:

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item .page-link {
  border-radius: var(--bs-pagination-border-radius);
}

That makes me suspicious of this line, which was recently changed:

bootstrap/scss/_pagination.scss

Line 78 in edf9c40

@if $pagination-margin-start == (calc($pagination-border-width * -1)) {

This appears to be evaluating to false for me.

Reduced test cases

I’ve tried to create a reduced test case here: https://www.sassmeister.com/gist/eeae55c689cbaba226ec9ef0d148f315 (note that this is using Dart Sass v1.32.12)

If that test case is valid, it seems as though the compiled version of Bootstrap 5.2 differs from (at least some…) consumer-compiled versions.

It makes me wonder if this is a variation between Sass compilers or versions. I’m in a Rails app, using the sass-rails and bootstrap gems. I believe sass-rails is a wrapper around LibSass. I’m not sure which Sass was used to build the distributed CSS files for Bootstrap 5.2.

Any help greatly appreciated! Let me know if I can provide anything else. Thanks!

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.2.0

[julien-deramond]

I'm not sure of anything but this could be caused by 154916c and the interrogation that I had at the time (see #36740 (comment)).

In sassmeister there is apparently a difference between @if $pagination-margin-start == (calc($pagination-border-width * -1)) and @if $pagination-margin-start == ($pagination-border-width * -1) which are evaluated differently.

In our build, both versions are evaluated true so I suppose that it wouldn't be a problem to remove the calc.

Are you able locally to make this change and to test if works on your side?

diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index e8e10a6d6..cf4db3c36 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -75,7 +75,7 @@
     margin-left: $pagination-margin-start;
   }

-  @if $pagination-margin-start == (calc($pagination-border-width * -1)) {
+  @if $pagination-margin-start == ($pagination-border-width * -1) {
     &:first-child {
       .page-link {
         @include border-start-radius(var(--#{$prefix}pagination-border-radius));

[crftwrk]

@julien-deramond yes, this fixes it.

[tysongach]

@julien-deramond Also confirming that your diff above fixes the issue.