SliderSize vs ListSize when zoomed

[dzanitchkhahMC]

Hi All,

I'm experiencing some problems with the isOverflow() method when zoomed (everything works fine in normal circumstances but if the browser or desktop is zoomed the problem occurs)...

I have some code such as this:

private onResize(): void { const Splide = this.tabCarousel?.getSplide(); const hasOverflow = tmpSplide?.Components.Layout.isOverflow(); Splide?.Components.Drag.disable(!hasOverflow); }

The idea was to stop the dragging and hide the arrows (via CSS) when there's no overflow, essentially disabling the slider.

When zoom is applied the isOverflow() method can return incorrectly, or at least, it seems that way to me.

Digging into the code it looks like isOverflow() does something like this:

sliderSize(true) > listSize()

Both of these methods use rect(), which relies on getBoundingClientRect() to get dimensions/positions and it's the values returned from here which seem to be causing me a problem...

Often, when zoomed, the sliderSize is equal to listSize but the decimals don't seem to be matching and sliderSize can be fractions of a pixel larger than listSize. This causes is-overflow to be added to the Splide element and the arrows to appear.

I'm not sure if this is a known problem or an issue related to our implementation of Splide but if anyone is able to offer me some advice that would be great.

Maybe this is actually a bug, in which case, i'd be happy to log a bug/issue ticket.

TIA,

Dan