[thumbAutosize]="true" causes random invalid starting thumbnail scroller position when scrolling possible

AngeloGi commented 1 year ago

What is the expected behavior?

The thumbnail scroller should be unscrolled, at its leftmost/topmost point.

What is the current behavior?

The thumbnail scroller scrolls past the selected (highlighted) image, stopping at some seemingly random point. Note, it does NOT happen in every refresh, it seems to happen randomly at each render, as you keep refreshing.

What are the steps to reproduce?

Add a gallery with the below parameters:

<gallery imageSize="contain" [thumbAutosize]="true" thumbPosition="right" [items]="images">
  </gallery>

Make sure that the thumbnails are enough so that they can scroll and do not fit all at once.

Refresh the page a few times, until you see the thumbnail scroller start randomly pre-scrolled, past the highlighted item.

What is the use-case or motivation for changing an existing behavior?

Which versions are you using for the following packages?

Angular: 15.1.1 Angular CDK: 15.1.1 Angular CLI: 15.1.2 Typescript: 4.9.4 Gallery: 8.0.2

Is there anything else we should know?

First page render (correct, expected scroll position at image 1) first render (correct scroll position) After refreshing a few times (scrolled past highlighted image 1)

MurhafSousli commented 1 year ago

Could you add a stackblitz reproduction https://stackblitz.com/edit/ngx-gallery?

Try setting loadingAttr="eager" and see if that fixes the issue!

AngeloGi commented 1 year ago

I tried but that attribute is not making any difference!

I also tried replicating my code into stackblitz but it's not happening. I am assuming it has something to do with the loading differences (my API vs the stock images)...I don't know how else I can debug this! It seems while the images load, they push each other around and that causes scrolling on the thumbnail container.

MurhafSousli commented 1 year ago

Hmmm, so maybe in this case it should trigger an update every time an image is loaded

peterviegas commented 1 year ago

How to eliminate the item that appears black at the beginning and end of the carousel?

MurhafSousli commented 1 year ago

@peterviegas what item appears black? if you mean the empty spaces in the main slider you can use imageSize="cover", I would recommend opening a new issue with a reproduction

peterviegas commented 1 year ago

Murhaf, thank you very much for the feedback, yes I put it in my project and I can't remove spaces in the main slider, I'll try.

Thanks

Peter Viegas

@.***

De: Murhaf Sousli @.> Enviada em: segunda-feira, 7 de agosto de 2023 23:12 Para: MurhafSousli/ngx-gallery @.> Cc: Peter Viegas @.>; Mention @.> Assunto: Re: [MurhafSousli/ngx-gallery] [thumbAutosize]="true" causes random invalid starting thumbnail scroller position when scrolling possible (Issue #521)

@peterviegashttps://github.com/peterviegas what item appears black? if you mean the empty spaces in the main slider you can use imageSize="cover", I would recommend opening a new issue with a reproduction

- Reply to this email directly, view it on GitHubhttps://github.com/MurhafSousli/ngx-gallery/issues/521#issuecomment-1668642672, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AVZFPNVE4R3NEZCFCZ27YUTXUFRZVANCNFSM6AAAAAAUCRUN7M. You are receiving this because you were mentioned.Message ID: @.***>

MurhafSousli / ngx-gallery