Amphtml: When using amp-lightbox with attribute scrollable, amp-img not load the image

[mauricionr]

What's the issue?

without attribute scrollable in a amp-lightbox the amp-img tag load the image as expected,

How do we reproduce the issue?

add the scrollable attribute in a amp-lightbox, the amp-image not load the image

        <amp-lightbox id="search-results" layout="nodisplay">
        <section class="modal-content search">
          <div class="search">
            <form id="input-search" role="search" target="_top" action="/busca" method="get">
              <input id="search-field" on="input-debounced:AMP.setState({term: { q : event.value } })" type="search" name="q" placeholder="O que precisa?" autocomplete="off" class="white" autofocus />
              <span class="clear icon-search submit material-icons" role="button" tabindex="1" on="tap:input-search.submit">search</span>
              <span class="clear icon-search material-icons" role="button" tabindex="1" on="tap:search-results.close">close</span>
            </form>
             <amp-list
              height="200px"
              class="search-suggestions"
              layout="fixed-height"
              src="${input.uri}/service/amp/search/sugestions"
              [src]="'${input.uri}/service/amp/search/sugestions/' + (term.q || '')">
                <template type="amp-mustache">
                  <div class="url-entry">
                    <a href="/busca?q={{consulta}}">{{consulta}}</a>
                  </div>
                </template>
            </amp-list> 
             <amp-list
              height="400px"
              class="search-suggestions"
              layout="fixed-height"
              src="${input.uri}/service/amp/search/recommendations"
              [src]="'${input.uri}/service/amp/search/recommendations/' + (term.q || '')">
                <template type="amp-mustache">
                  <div class="recommendations-item">
                    <a class="item" href="{{url}}">
                      <amp-img src="{{imagem}}" width=40 height=40></amp-img>
                      <div class="search-info">
                        <div>{{descricao}}</div>
                        <div class="price">{{preco}}</div>
                      </div>
                    </a>
                  </div>
                </template>
            </amp-list> 
          </div>
        </section>
      </amp-lightbox>

1. add the attribute scrollable to amp-lightbox
2. the amp-img not load the image

What browsers are affected?

All browsers

Which AMP version is affected?

i guess all versions

[mauricionr]

I've upload a demo

https://mauricionr.github.io/demos/amp/lightbox-no-scrollable/

https://mauricionr.github.io/demos/amp/lightbox-scrollable/

[jridgewell]

/to @muxin

[ampprojectbot]

This issue hasn't been updated in awhile. @aghassemi Do you have any updates?

[aghassemi]

Assigning to @jridgewell as layers work should cover this.

[zhkuskov]

i have the same with amp-list component when lists items are loaded dynamically:

if i place combobox (https://ampbyexample.com/advanced/combobox/ ) into amp-lightbox with attr scrollable - list items are not loaded.

but without the scrollable attribute, everything works as it should

[jridgewell]

It's because AMP won't load content it believe is hidden, and we don't yet have a way to determine that the lightbox has scrolled to show the content. AMP layers will indeed fix this.

[aghassemi]

Fixed by #12751
Verified https://mauricionr.github.io/demos/amp/lightbox-scrollable/ behaves properly with the new code
Note: code is in Dev Channel currently, will be in prod next week.