Amphtml: [amp-pan-zoom] seatmap SVG flickers and resets zoom if using amp-binding amp-list [src]

[labreaks]

What's the issue?

We are using the pan-zoom control to wrap an SVG seatmap. When we made a change to bind the seatmap's amp-list to use [src] instead of src, we noticed a couple things.

1. Every time you select a seat, the seatmap will quickly resize to a larger size and then back to normal. This is especially apparent on wider screen sizes like Ipads.
2. If the pan-zoom is zoomed in and you select a seat, the zoom resets.

How do we reproduce the issue?

seatmapbug720p.zip
I attached a video with steps. Basically, once the seatmap's amp-list uses [src], do the following:

1. Open the seatmap page.
2. click the pan-zoom icon to zoom in.
3. select a seat.
   ** notice: the seatmap's zoom is reset.

I can't provide a public URL because we caught the issue and rolled back before reaching our prod environment. If you want to coordinate though, we can push the change to our public sandbox so you can see.

What browsers are affected?

see on Chrome desktop and Android mobile

Which AMP version is affected?

Noticed the issue on version 1901222200430, but it may have existed before.

[kul3r4]

@cathyxz FYI

[cathyxz]

Using [src] in <amp-list> means that whenever the contents of the object referenced in src updates, the children of the <amp-list> will be removed from the DOM and new children will be generated from the new data. So the original <amp-pan-zoom> will be deleted and a new one will be created and attached. Since the old and new <amp-pan-zoom> elements are literally not the same element, it's not possible to keep the same zoom.

You could theoretically maintain the zoom attributes in amp-state, and either initialize the new amp-pan-zoom with the old values, or call the transform action. But that would still leave a flicker.

[kul3r4]

Is the flickering caused by the amp-pan-zoom calculating the size? Can we maybe hide it until the size if final to avoid the flickering?

[aghassemi]

@kul3r4 is there a reason list needs to fully refresh on seat selection? Is it possible to just mutate the state of the set items without refreshing the list?

[labreaks]

Hi all, Chiara suggested to me similarly to what Ali is saying to extract the seat-map state from userState object graph. By binding to the subset of data, we were able to fix the problem since it no longer requires a refresh of the entire object graph.

Thanks for the help!!! Closing this one out.