Browser resize does not properly resize `<gallery>` when `[autoHeight]="true"`

[ChrisMBarr]

What is the expected behavior?

When I set [autoHeight]="true" and I resize my window, the gallery height should animate to the correct height.

What is the current behavior?

When I set [autoHeight]="true" and I resize my window, the gallery height is not always updated until I click on it. If I resize multiple times, it seems to store up all the past heights it encountered and "replay" them. See a screen recording here

What are the steps to reproduce?

I set up my HTML with this

<gallery
  [items]="imagesArr"
  imageSize="cover"
  [counter]="false"
  [autoHeight]="true"
  [thumbWidth]="200"
  [thumbHeight]="200"
/>

And then in my TS file I just provided the imagesArr with an array of ImageItem objects with only a src and a thumb path

StackBlitz: Code | Demo

Like in my screen recording, try opening up dev tools and toggling the device toolbar on and off. You will see the resize weirdness happen

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

To make images appear correctly when the browser is resized

Which versions are you using for the following packages?

Angular: 16.2.1 Angular CDK: 16.2.1 Angular CLI: 16.2.0 Typescript: 5.1.6 Gallery: 11.0.0

Anything else?

I have found a temporary workaround, which I hate, but it does work to fix the issue.

private resizeDebounce?: ReturnType<typeof setTimeout>;

@HostListener('window:resize', ['$event'])
onWindowScroll(): void {
  clearTimeout(this.resizeDebounce);
  this.resizeDebounce = setTimeout(() => {
    document.querySelector('.g-slider-content gallery-item')?.dispatchEvent(new Event('click'))
  }, 100);
}

[MurhafSousli]

Yea, that doesn't look great, I have to look into this!

It's good you have a found a workaround, maybe you can also use cd.detectChanges() with BreakpointObserver instead, like this https://stackblitz.com/edit/finitelooper-ng16-q6hwhx?file=tsconfig.json,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

[ChrisMBarr]

I've not heard of BreakpointObserver until now, that's neat!

However I think this resize issue happens on any resize, not just at breakpoints. The gallery shows/shrinks as the page resizes and it just feels weird and jerky. However, it is much more noticeable when doing a large size jump, like a mobile/desktop breakpoint

[MurhafSousli]

The auto-height is relatively a new feature in this plugin, it didn't receive enough feedback to improve. I will consider using the ResizeObserver in the future to detect when item size is changed, it's much more efficient but using it the way the gallery is built at the moment would cause a kind of infinite size change detection because of the height transition animation.

[ChrisMBarr]

I would like the ability to:

• Define when to resize as separate options (both default to on, how it works currently)
  • Only when the window is resized
  • Only when a different sized image comes up in the gallery
• disable the resize animations, or have the ability to customize them.

If there were no resize animation on window resizing, some of my issues here would just go away, or at least not be visible or apparent

[MurhafSousli]

You can change the transition actually, try this out

gallery {
  --g-height-transition: none;
}