Unexpected transform: translateX added to slider children / items

[adewalegeorge]

Test case: https://codepen.io/desandro/pen/WzGgJY

This has been working without version changes but as you can see from the codepen example on this page https://flickity.metafizzy.co/options.html#adaptiveheight it appears broken. How can I go around this?

it used to return something like left: 0%; but now returns transform: translateX(0%);

This issue cancels out all of my transform use cases when trying to vertically center the slider items / content.

[Hud1ai2]

Don't know what to see, but I have problem with Flickity in repeater. Some sliders work like this The first image is ok but the second one is moved somehow.

[Hud1ai2]

So you can check the same behaviour here https://jsmerab.cz/horolezectvi/

And try these steps

1. open that site and try some of the sliders - doesn't work as should be
2. change the size of the browser window and try some slider. It will work.
3. maximaze the browser window and it will work. But refresh the page and slider doesn't work. Till you repeat the steps above

[Hud1ai2]

I've found next thing. If you open the Inspector, you can change the size of the window about 1px only. Even this small change and it starts to work.

[adewalegeorge]

I've found next thing. If you open the Inspector, you can change the size of the window about 1px only. Even this small change and it starts to work.

The issue above is that the vertical alignment of the images/items is broken. There have been no effective changes in the implementation.

It used to be something like

and now..

As you can see the transform: translateX was added inline which overrides the one set in my stylesheet

[desandro]

As of Flickity v2.3.0, Flickity no longer sets left but uses transforms instead. If you need to use transforms, I recommend setting the transform on an interior element within a cell, not the cell element itself.