Large space between first and last item

[PG-20]

There is a large space between the first and last items in the marquee and the behaviour is surprisingly very inconsistent. If i switch the viewport to mobile size, it works well, and I switch it back to desktop, it's perfect too, but when I refresh it again, back with the white space b/w first and last item. Not sure how to fix. I using the <Marquee> tag without any props currently

[justin-chu]

Can you provide your code so that I can reproduce this? I will try to fix this as soon as possible.

[PG-20]

Sure, but it's really nothing much

function OurPartners(): ReactElement {
  const classes = useStyles();

  return (
    <>
      <section className={classes.section}>
        <p className={classes.head}>
          OUR PARTNERS
        </p>
        <Marquee>
          <img
            alt="Cyberport"
            src="/images/about-logo-cyberport.png"
            className={classes.image}
          />
          <img
            className={classes.image}
            alt="Innovation and Technology Commission"
            src="/images/about-logo-innovation-and-technology-commission.png"
          />
          <img
            className={classes.image}
            alt="Invest HK"
            src="/images/about-logo-invest-hk.png"
          />
          <img
            className={classes.image}
            alt="HK Financial Services Development Council"
            src="/images/about-logo-hk-financial-services-development-council.png"
          />
          <img
            className={classes.image}
            alt="Microsoft Partner Network"
            src="/images/about-logo-microsoft-partner-network.png"
          />
          <img
            alt="AWS"
            src="/images/about-logo-aws.png"
            className={classes.image}
          />
          <img
            className={classes.image}
            alt="Tencent Cloud"
            src="/images/about-logo-tencent-cloud.png"
          />
          <img
            className={classes.image}
            alt="Alibaba"
            src="/images/about-logo-alibaba.png"
          />
        </Marquee>
      </section>
    </>
  );
}

[PG-20]

Hi @justin-chu, any luck? Perhaps try adding a continuous prop to the Marquee tag? Not entirely sure how that will work though. I see that the demo is working fine on your website but I'm having trouble making mine work continuously, would be great if you could help me out!

[justin-chu]

Hey @PG-20, sorry, I should have a fix pushed by next week. A temporary fix for you might be to paste all the components multiple times as the children of the marquee.

[PG-20]

Great, I'll wait. So I guess you found the bug then? What was the issue?

[justin-chu]

It's most likely due to it only repeating the child components twice, so larger screens may have a gap between the last and first component. There might be a couple other bugs to that I'll fix soon.

[aliiip]

Any update on this issue? I'm also facing a problem with a gap between the first and last component on large screens.

[justin-chu]

Sorry @aliiip, I've been trying to find a way to repeat the children dynamically, but the problem is harder than I initially thought it would be.

[maximousblk]

I've been experimenting with ways to fix this and i think i have found the problem.

setting the min-width: 100% to min-width: max-content or anything that has a similar effect solves this problem

https://github.com/justin-chu/react-fast-marquee/blob/8dd03310d0d1a924645437868542b3c279405338/src/components/Marquee.scss#L50

min-width: 100%

min-width: none

doing this in chrome dev tools fixes it for me but i haven't tried patching the package

[mickbut-ler]

Are there any updates/fix for this issue?

[joshuaellis]

I've been experimenting with ways to fix this and i think i have found the problem.

setting the min-width: 100% to min-width: max-content or anything that has a similar effect solves this problem

https://github.com/justin-chu/react-fast-marquee/blob/8dd03310d0d1a924645437868542b3c279405338/src/components/Marquee.scss#L50

min-width: 100%

min-width: none

doing this in chrome dev tools fixes it for me but i haven't tried patching the package

This solution while somewhat effective doesn't resolve the root of the issue which is the library only clones the items once so if you render 3 items, the component will render 6 instead. Even with min-width: max-content set, if the 6 items do not fill the screen (e.g. on a 4K monitor) then it won't work and you'll have to manually duplicate your items as suggested above.

The long term solution I suppose would be to measure the width of the .marquee container, measure the width of the space the marquee exists in and use that as basis to understand how many times you must clone the items passed to the component.

[TomSmedley]

At the moment, I just duplicated the children, it's not perfect but it works for now.

[justin-chu]

Fixed in 1.4.0

[Luna-omni]

Hello, I've encountered the same phenomenon. When i removed div.marquee min-width:100% property in chrome developer tab it works well. I read above issues and found this problem fixed in 1.4.0 so i updated latest version but i think it still has a problem and i don't know why. Could you help me please?

[justin-chu]

@Luna-omni could you please set autoFill={true} and see if this fixes it?

[Luna-omni]

@justin-chu oh, it works perfectly so much thanks!! 😀

[BmAlkes]

im try to use the marque fast and dont show all the pictures also the autofill dont work.. maybe some one know where is the problem?

` <div className="w-full bg-[#6FCFED] mt-14 flex"> <Marquee autoFill={true}> <img src={react} alt="react logo" className=" h-[115px] object-cover" />

        <div className="m-1  flex p-4 ">
          <img
            src={css}
            alt="css logo"
            className="  h-[115px] object-cover"
          />
        </div>

        <div className="m-1  flex p-4 ">
          <img
            src={nextjs}
            alt="nextjs logo"
            className=" h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={elementor}
            alt="elementor logo"
            className="  h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={firebase}
            alt="firebase logo"
            className="  h-[115px] object-cover"
          />
        </div>
        <div className="m-1 flex p-4 ">
          <img
            src={zustand}
            alt="zustand logo"
            className=" h-[115px] object-cover"
          />
        </div>
        <div className="m-1  flex p-4 ">
          <img
            src={redux}
            alt="redux logo"
            className=" h-[115px] object-cover"
          />
        </div>

        <div className="m-1  flex p-4 ">
          <img
            src={node}
            alt="node logo"
            className=" h-[115px] object-cover"
          />
        </div>
      </Marquee>`