Rounding error (?) causes swiper.isEnd to be incorrect and thus .swiper-button-disabled to not be applied

[AaronBeaudoin]

Check that this is really a bug

• I confirm

Reproduction link

https://github.com/AaronBeaudoin/swiper-bug

Bug description

IMPORTANT: Although, I have successfully created a reproduction, this issue can only be reproduced under specific circumstances due to it being influenced by monitor DPI (or something like that). I can literally drag the browser window from one monitor to another to toggle whether the bug appears, so read the description below carefully to understand what exactly I'm seeing.

Description

When I open the reproduction above in my browser (it is nothing but an index.html file) on my Macbook Pro's internal display, the Swiper does not correctly detect when it has been scrolled to the end.

The Swiper is in cssMode: true, so when I say "scrolled to the end" I mean that I've hovered my mouse over the .swiper-wrapper element and scrolled with two fingers horizontally to the end of the scrollable area inside the element.

When I do so, the .swiper-button-next element should have gotten the .swiper-button-disabled class, because the Swiper is at the end and therefore is not able to scroll further. However, the button remains unchanged. If the button is clicked, the Swiper then correctly detects that it is at the end and toggles the class correctly.

My Digging

I did some digging to save you some time, or in the case that you cannot reproduce the behavior with your monitor setup. Here's what I found.

When I add a breakpoint in core/update/updateProgress.js on line 20, the state when the Swiper has been scrolled all the way to the end is as follows:

translate: -157.5
swiper.minTranslate(): 0
swiper.maxTranslate(): -157.6
progress: 0.9993654822335025

The Swiper cannot at this point be scrolled further, although from the number it seems that it should. So it seems that either some math in there is wrong, or the progress should be relaxed to consider the Swiper to be at the end if it is within 1 pixel of the "expected" end value.

Expected Behavior

No response

Actual Behavior

No response

Swiper version

8.4.5

Platform/Target and Browser Versions

macOS Chrome 108.0.5359.124 arm64

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[AaronBeaudoin]

I've found a "band-aid" solution for this:

swiper.on("progress", _ => {
  if (_._progressBandAid) return;
  const isBeginning = Math.abs(_.translate - _.minTranslate()) < 1;
  const isEnd = Math.abs(_.translate - _.maxTranslate()) < 1;

  if (isBeginning || isEnd) _._progressBandAid = true;
  if (isBeginning) _.setProgress(0, 0);
  if (isEnd) _.setProgress(1, 0);
  _._progressBandAid = false;
});

Kind of a shitty solution though. The existence of it doesn't negate the need for an actual fix.

[AaronBeaudoin]

Also, the reason I didn't check off the "I'm willing to open a PR" task is because after digging through the source code I'm still not sure exactly what the root cause of this issue is, and I'm not confident that baking a version of my "band-aid" solution into the source code would be an acceptable fix.

[nolimits4web]

Thank you, will be fixed in v9