CSS breaks when rendering components with array.map()

[alphanoobie]

Checks

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

Version

0.7.12

Description

When I try to render using array.map() the css of the component breaks.

This is the result with following code:

<Splide
          hasTrack={false}
          options={{
            pagination: false,
            rewind: true,
          }}
        >
          <SplideTrack>
            <SplideSlide>
              <CompanyCard />
            </SplideSlide>
            <SplideSlide>
              <CompanyCard />
            </SplideSlide>
            <SplideSlide>
              <CompanyCard />
            </SplideSlide>
            <SplideSlide>
              <CompanyCard />
            </SplideSlide>
            <SplideSlide>
              <CompanyCard />
            </SplideSlide>
          </SplideTrack>

          <div className="splide__arrows">
            <button className="splide__arrow splide__arrow--prev bg-transparent">
              <img
                src="assets/landing3/left-arrow.svg"
                alt="left button"
                className="hover:scale-125 transition duration-500"
              />
            </button>

            <button className="splide__arrow splide__arrow--next bg-transparent">
              <img
                src="assets/landing3/right-arrow.svg"
                alt="right button"
                className="hover:scale-125 transition duration-500"
              />
            </button>
          </div>
        </Splide>

And this is what happens when the code looks like this

<Splide
          hasTrack={false}
          options={{
            pagination: false,
            rewind: true,
          }}
        >
          <SplideTrack>
            {companyData.map(()=>{
              return(
                <SplideSlide>
                  <CompanyCard/>
                </SplideSlide>
              )
            })}
          </SplideTrack>

          <div className="splide__arrows">
            <button className="splide__arrow splide__arrow--prev bg-transparent">
              <img
                src="assets/landing3/left-arrow.svg"
                alt="left button"
                className="hover:scale-125 transition duration-500"
              />
            </button>

            <button className="splide__arrow splide__arrow--next bg-transparent">
              <img
                src="assets/landing3/right-arrow.svg"
                alt="right button"
                className="hover:scale-125 transition duration-500"
              />
            </button>
          </div>
        </Splide>

The above screenshot is taken at 25% zoom level.

Reproduction Link

No response

Steps to Reproduce

1.create a carousel with arrap.map()

Expected Behaviour

Component rendered should look the same in both scenarios mentioned above

[DanielRuf]

We are seeing something similar, but it only breaks "sometimes". Not yet sure why.

[DanielRuf]

It seems this is not our issue. We have another issue with the breakpoints not firing on navigation change.