SOLVED: Splide transition making sliders less responsive

There’s a new line of CSS has been added to Bricks’ splide file causing issues…

.splide__list {
  transition: height .1s,transform .4s cubic-bezier(.25,1,.5,1) 0s!important;
}

This is causing the slider to not be as responsive, in terms of the user interaction. It means the user has to swipe for nearly half a second before the slider moves. Making it appear buggy.

Due to the none-specific selector, this is affecting all Splide sliders. We’ve had a few bug reports come through BricksExtras due to this, but because of the !important we can’t override it. (can’t override with more !important as the inline style is supposed to kick in as the slider moves)

Splide is supposed to add the transition only after it starts moving. This CSS rule prevents that from happening.

if the intention of adding this CSS was to make it so it’s less likely for accidentally move the slider, Splide has an option for this, which is better suited called ‘dragminthreshold’ - Options - Splide

This option would change the number of px needed to swiper in order to move the slider, but doesn’t affect any of the transitions. Hardcoding in the transition like this is causing buggy behaviour.

2 Likes

Update - it’s actually causing a much less subtle issue. When the page loads, the slider has to transition into place, rather than being static.

@wplit I was able to replicate the issue. The CSS was added to support the “Auto height” setting.

We’ll provide a fix by removing the newly added transform, and apply the align-items only when the “Auto height” is enabled to .splide.brx-auto-height .splide__list

1 Like

Nice one. Sounds good, thanks!

1 Like

Hi David,
We’ve fixed this issue in Bricks 1.9.1/1.9.1.1, now available as a one-click update in your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like