Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<amp-img /> doen't init when it roll into viewport. #25789

Closed
meistudioli opened this issue Nov 27, 2019 · 5 comments
Closed

<amp-img /> doen't init when it roll into viewport. #25789

meistudioli opened this issue Nov 27, 2019 · 5 comments
Assignees
@jridgewell
Labels
Type: Bug WG: runtime

Comments

@meistudioli
Copy link
Contributor

meistudioli commented Nov 27, 2019 •
edited
Loading

To whom it may concern:

I used a CSS carousel to display some cards but looks like amp-img can't init when it has already in viewport.

<style>
:root {
  --spl: .75em;
}
.carousel-shell{width:100%;-webkit-overflow-scrolling:touch;overflow:hidden;overflow-x:scroll;}
.carousel-shell__queue{display:flex;justify-content:flex-start;}
.carousel-shell__queue>*{flex-grow:0;flex-shrink:0;}
.carousel-shell__queue::before{flex:0 0 var(--spl);width:var(--spl);content:'';display:block;}
.carousel-shell__queue::after{flex:0 0 var(--spl);width:var(--spl);content:'';display:block;}

.view-also-view{background:#fff;margin-top:.75em;padding:1em var(--spl);border-top:1px solid #e0e4e9;border-bottom:1px solid #e0e4e9;}
.view-also-view__wrap{position:relative;;width:calc(100% + var(--spl) * 2);height:130px;margin-top:1em;margin-left:calc(var(--spl) * -1);}
.view-also-view__unit{position:relative;width:130px;border-radius:8px;overflow:hidden;display:block;}
.view-also-view__div{position:absolute;display:flex;bottom:0;width:100%;padding-top:.75em;min-height:3.125em;background-image:linear-gradient(0deg,rgba(0,0,0,.7),transparent);align-content:center;}
.view-also-view__p{width:100%;font-size:.9375em;/*15px*/color:#fff;line-height:1.33;max-height:2.66em;box-sizing:border-box;border-left:.667em solid transparent;border-right:.667em solid transparent;align-self:center;white-space:normal;overflow:hidden;}
.view-also-view__unit+.view-also-view__unit{margin-left:.625em;}
</style>


<div class="view-also-view custom-loader">
    <h3 class="view-also-view__h3">最新上架</h3>
    <div class="view-also-view__wrap">
      <div class="carousel-shell">
        <div class="carousel-shell__queue">
             <a href="https://tw.mall.yahoo.com/item/p0246199433663" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199433663">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/lJ_gtWKxeBSo303bWVQaKQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/7271/item/p0246199433663-item-79d2xf4x1000x1000-m.jpg" title="東京著衣-夢展望-小高領側排釦麻花針織洋裝-M.L(4190072)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-小高領側排釦麻花針織洋裝-M.L(4190072)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383906" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383906">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/Q6BkR5W4IiSVjNwvsM5kXw--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/eed1/item/p0246199383906-item-f441xf4x1000x1000-m.jpg" title="東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383903" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383903">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/DGEQwzUy88WM80Eg38rbxg--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/687c/item/p0246199383903-item-d69cxf4x1000x1000-m.jpg" title="東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-條紋印花長袖襯衫-M(4190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383900" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383900">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/_Y3Lyjwx_RZv0QzOvPktxQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/df5e/item/p0246199383900-item-e36cxf4x1000x1000-m.jpg" title="東京著衣-夢展望-花瓣一字領羅紋長袖上衣-M.L(4190009)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-花瓣一字領羅紋長袖上衣-M.L(4190009)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383896" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383896">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/dmqOnO1zuu6i9oYlXI4FSQ--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/66db/item/p0246199383896-item-a50dxf4x1000x1000-m.jpg" title="東京著衣-SILKY-華夫格針織V型針織開襟外套(7190005)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-SILKY-華夫格針織V型針織開襟外套(7190005)</p>
                  </div>
                </div>
            </a>
             <a href="https://tw.mall.yahoo.com/item/p0246199383897" class="view-also-view__unit aspect-ratio" data-vars-event-label="p0246199383897">
                <div class="content">
                  <amp-img layout="fill" class="cover" src="https://s.yimg.com/ut/api/res/1.2/YqHAt662vsiRm1ZxKLxE.g--~B/dz02MDA7aD02MDA7cT0xMDA7Zmk9Zml0O3NzPTEuMDthcHBpZD15dHdtYWxs/https://s.yimg.com/fy/a0fc/item/p0246199383897-item-c2b2xf4x1000x1000-m.jpg" title="東京著衣-夢展望-雙排釦修身毛呢大衣-M.L(4190073)"></amp-img>
                  <div class="view-also-view__div">
                      <p class="view-also-view__p line-clampin hyphenate">東京著衣-夢展望-雙排釦修身毛呢大衣-M.L(4190073)</p>
                  </div>
                </div>
            </a>

        </div>
      </div>
    </div>
</div>

AMP Version: 1911121900560
@meistudioli meistudioli changed the title <amp-img /> doen't init when it into viewport. <amp-img /> doen't init when it roll into viewport. Nov 27, 2019
@meistudioli meistudioli mentioned this issue Nov 27, 2019
Open
@c0b41
Copy link

c0b41 commented Nov 29, 2019

follow up this issue #24929

@dreamofabear
Copy link

Hi Paul, can you try your example against AMP dev channel? It contains a fix that might address your use case.

@meistudioli
Copy link
Contributor Author

meistudioli commented Dec 3, 2019 •
edited
Loading

Hi, @choumx:

I've already opt-in dev channel and looks like fine for me. Will it release with this issue #25680 ?

image

Looks like the above release issue is correct.

@dreamofabear
Copy link

Not the next release but we're planning to roll this feature out over time (#25785).

@jridgewell can give details on the roll out plan.

@jridgewell
Copy link
Contributor

It's live in production now. #26430

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jridgewell jridgewell

Labels
Type: Bug WG: runtime
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@jridgewell @c0b41 @meistudioli @dreamofabear