Bug when using data-x-slide-goto attribute on an component with scroll effects

Support
#1

I have come across a bug that occurs when using the data-x-slide-goto attribute on an element that has scroll effects enabled on it.

I have a slider with three “tabs” with a “tab list” style element common across them all, to act as navigation between the slides.

The buttons within this list are components with basic scroll effects enabled so that they slide in when navigating between slides.

With normal navigation enabled, this works as expected.

When I add the data-x-slide-goto attribute to the tab list buttons, the elements go into their “exit” state, with 0 opacity and a translation applied. They are still interactive in this state, and I can click between the tabs, but obviously the elements are invisible.

I have set up on a demo site the situation with the bug occurring, which can be seen here:
https://components.odb.host/sample-page

I have added a light background on the buttons, where the text should be visible.

I will also give access to the site in a secure note so that you can see the setup of the slider and elements.

#2

Hello Jakob,

Thanks for writing in! Regretfully we have not checked the site because the WP Access does not work for us. It seems that the username or password is incorrect. Please double-check it.

Best Regards.

#3

Whoops! I added the account to the live site instead of this demo page. I have updated it now so you will be able to log in.

#4

Thank you for the update.

Apparently, the exit effect is triggered when the tab list button is active and sets the opacity of the button text to zero. We are not yet sure why that is. To fix the issue temporarily, we added a custom css class attribute to the slider container, then added this css code to keep the tab button title or headline visible on click.

.x-custom-tab-slider .x-text.x-text-headline {
	opacity: 1 !important;
}

Please make sure to purge the cache before testing the page.

Warm regards.

#5

Hi Ismael

Thanks for your response.

Unfortunately the opacity issue is not the only thing happening here, as the transform is also in the exit state with 1rem of y position applied.

Is this a bug that will be fixed in a future update, or is this a side-effect of another feature that cannot be overcome?

#6

Thank you for the update.

What do you mean by 1rem y? We might be able to override it with css, as we’ve done previously.

To be honest, using the Tab List in this case is quite impractical because you have to recreate the Tab List button for each slide. If you’re going for a slider with the same look as the Tab List, you can easily recreate it with custom Div elements and a few style changes. This way, you won’t have to recreate the Tab List navigation for each slide.

If you’re interested in these kinds of customizations, you can check out our One service.

Warm regards,
Ismael

#7

Hi Ismael,

Although I am using the slider in a fairly advanced way, the issue is applying to any element within the slider that has a effect applied, and is also being used to advance to another slide via the data-x-slide-goto attribute.

Regarding the 1rem of y translation, I am referring to the other aspect of the Scroll Effect applied to the button.

On the same page, I have set up another example which demonstrates the bug in a simpler way.
https://components.odb.host/sample-page/

There are three slides, with a button on the first slide to skip to slide 3.
This uses the data-x-slide-goto attribute.
However, this breaks the scroll effects that should be present on the button.
As you can see, the text above also has a scroll effect, which works as expected: transitioning the text in and out as you navigate between slides.
This should also apply to the button, instead it is stuck with opacity: 0 and transform: translate(0px, 1rem) applied (the defaults when adding a Scroll Effect to any element)

Hopefully this helps illustrate the issue I am facing, and I presume it is a bug within Cornerstone / Pro, rather than something that requires customisations from the One service.

Thanks
Jakob

#8

Thank you for the info. We’ll forward the issue to our channel.

1 Like