Unexpected behaviour of CSS in child component

[iamshouvikmitra]

The transform: translate .. property in the <ul class="slider animated"> prevent child components position:fixed to take effect.

As discussed here would be great if we could remove the transform property after the transition ends

[iamshouvikmitra]

My use case is such that I have a few buttons inside the carousel items which trigger a modal, which in turn has position: fixed

Currently, I am trying to do a workaround as such

<Carousel
      ref={(el) => (carousel = el)}
      onClickItem={async (item, e) => {
        if (carousel) {
          let x = document.querySelector(".slider.animated");
          x.style = "transform: none";
        }
      }}
    >
      {widgets}
    </Carousel>

Is there a more graceful way to achieve the results?

[yasserzakyw]

Have the same issue! I am using some draggable cards as the carousel items, but I face the same problem since dragged card gets position: fixed once dragging starts, which conflicts with transform style given to it's parent (Carousel).

@iamshouvikmitra I tried the same workaround, but it just scrolls back to the first carousel item, which is visually annoying to the user. Especially of the carousel has so many items.

[shaunstoltz]

Only first shows... then this...translate3d(-1300%, 0px, 0px)

-1300% ???? no idea....

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.