Fade doesn't work with SplideJS v4.1.2

lunule commented 1 year ago

Checks

[X] Not a duplicate.
[X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v4.1.2

Description

I'm not sure if this is some conflict with the jQuery version (v3.6.1), or a plugin bug, but my testing shows that the fade slider type just doesn't work with the new Splide version: a transform is applied on non-active slides, and upon paginating, the transform is not removed - so

the previously active slide fades out, and
the wrongly positioned new active slide fades in but stays invisible as the slider track overflow is set to hidden.

The following CSS seems temporarily fixing the problem, but the real fix would be removing or updating/fixing the transformation config when type is set to fade.

.splide__slide {
    transform: none!important;
}

Reproduction Link

No response

Steps to Reproduce

Reproducing this bug doesn't require anything special, just a basic setup of a Splide slider, with type set to fade.

Expected Behaviour

THe expected behaviour is obviously a fade slider that works.

lunule commented 1 year ago

Sorry, my bad - as it turned out, I used the basic/min stylesheet of a previous Splide version, combined with the latest Splide script. ¯_(ツ)_/¯

Updating the stylesheet to its correct version fixed the issue.

hogash commented 1 year ago

Sorry, my bad - as it turned out, I used the basic/min stylesheet of a previous Splide version, combined with the latest Splide script. ¯(ツ)/¯

Updating the stylesheet to its correct version fixed the issue.

Hey!

v4.1.3 seems to contain this bug. Was this fixed and released?

lunule commented 1 year ago

Hey!

v4.1.3 seems to contain this bug. Was this fixed and released?

Hiya @hogash

In my case the update of the stylesheet to its latest version fixed the issue - you can see my demo here.

I'm not sure what exactly happened/is happening, because in version 4.1.3 at least, all transforms are handled by the JS script. Slides are relatively positioned, and after the first slide, each next slide has a negative percentage transform value "pulling" it back into the slider "frame". For instance, the second slide has a translateX(-100%) value, the third has a translateX(-200%) value and so on.

So, in principle, it should work on your end as well, except if some other script or style breaks the config.

hogash commented 1 year ago

Thanks a lot for getting back @lunule !

Got it! Just figured out how it's being positioned now. I thought translateX is still animated, and because i've had the slides positioned as absolute, it just conflicted.

Splidejs / splide