amp-carousel: Sometimes displays nothing due to incorrect layout box

[dlehmhus]

What's the issue?

AMP Carousel sporadically won't initialize / won't show any images on side load.

After side load:

After resizing the browser window:

How do we reproduce the issue?

https://www.cellular.de/

Click a couple of times on the icon in the upper left corner

What browsers are affected?

Chrome Version 65.0.3325.181 (It is working fine in private mode)

Which AMP version is affected?

Version 1522422854768

[aghassemi]

@dlehmhus I have not been able to reproduce but based on your screenshots, I am can see it is definitely happening. Likely a race condition. Does it reliably happen for you on desktop non-private mode Chrome?

[dlehmhus]

@aghassemi yes it happens reliably for me. The same happens on a couple of my coworkers computers. We all use MacBooks on macOS 10.13.3. I also witnessed the problem on a smartphone (Android 8.1.0 / Chrome 65.0.3325.109)!

[ampprojectbot]

This issue seems to be in Pending Triage for awhile. @aghassemi Please triage this to an appropriate milestone.

[ampprojectbot]

This issue seems to be in Pending Triage for awhile. @aghassemi Please triage this to an appropriate milestone.

[dijs]

We are experiencing a similar issue when navigating from a Google Search result link to the AMP page. The amp-carousel seems to not be initialized. The photos are not showing and the controls do not work.

[aghassemi]

@dijs Do you have a repro Url?

/to @sparhami

[sparhami]

This sounds like it could be caused by #19876. I can try to fix a few potential issues that may be causing this, but without a page to reproduce it on, I won't be sure whether or not I fixed the issue.

[dijs]

Sorry for the late reply here.

This can be reproduced by:

1. Use the Google mobile look in dev tools
2. Searching Google for "navy herringbone rug"
3. Go to the AMP page for "annieselke.com/Rugs/Herringbone..."
4. Upon landing on "https://www.google.com/amp/s/annieselke.com/Rugs/Herringbone-Navy-Ivory-Indoor-Outdoor-Rug/p/DA389.amp" the image carousel does not work

I can reproduce this every time I repeat those steps.

@aghassemi @sparhami

[sparhami]

@dijs Thanks for the steps, I was able to reproduce in incognito mode, will take a look.

[sparhami]

I am not able to reproduce 100% of the time, but I can reproduce a fair amount of the time. Clearing the browser cache may help reproduce it more often. I tried changing network speed without much luck, but it seems related to timing.

It looks like the carousel thinks it is not in the viewport (this.inViewport_ is false) and scrolling up and down the page does not seem to get it unstuck.

I noticed the carousel is using layout="fill", I'm not sure if the runtime is measuring it at some point where it has zero size and does not re-check it. The CSS for sizing looks static, so I'm not sure how this could happen. The run time seems to think the carousel has zero height:

$0.implementation_.getLayoutBox()

bottom: 315
height: 0
left: 0
right: 360
top: 315
width: 360
x: 0
y: 315

/cc @jridgewell @choumx

[sparhami]

I wonder if it is possible if the run time runs when the document has parsed the custom element, but before the browser has actually done layout + render (i.e. the developer's inlined CSS has not yet applied).

Edit: I suppose not, because the run time's measuring would cause a layout.

[jridgewell]

Where does the height get set on the carousel? I thought it had a weird container type.

[sparhami]

This carousel is fill, so it matches the height of the parent. The parent is a flex child (with flex 1) within a flex container. The parent of that has a height of 100vw.

[dijs]

Until we figure out the source of the problem, is there a temporarily fix we could implement for now?

[jridgewell]

The likeliest explanation is this is caused by flex-box. Is it necessary for your usecase?

[dijs]

We are using flexbox across all of our components.

[nainar]

Closing this issue due to low activity. Please file a new issue if needed.