search

justin-chu / react-fast-marquee

A lightweight React component that harnesses the power of CSS animations to create silky smooth marquees.
https://react-fast-marquee.com
MIT License
1.2k stars 97 forks source link

Large space between first and last item #7

Closed PG-20 closed 1 year ago

PG-20 commented 3 years ago
Screenshot 2021-03-24 at 1 22 06 PM

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 tag without any props currently

justin-chu commented 3 years ago

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

PG-20 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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

justin-chu commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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%

image

min-width: none

image

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

mickbut-ler commented 2 years ago

Are there any updates/fix for this issue?

joshuaellis commented 2 years ago

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%

image

min-width: none

image

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 commented 2 years ago

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

justin-chu commented 1 year ago

Fixed in 1.4.0

Luna-omni commented 1 year ago

marqueegap 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 commented 1 year ago

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

Luna-omni commented 1 year ago

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

BmAlkes commented 7 months ago

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? Screenshot_28

`

<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>`
  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.