amphtml: Twitter bento component does not resize properly

Description

The Twitter bento component does not resize properly when the page is scrolled fast. The embed shows the unexpanded state with an expand button. In both cases, the Tweet embed will appear unbuilt when it is first scrolled into view. This indicates the intersection observer needs to be tweaked for lazy construction of the embed. This issue occurs only for the amp-twitter-1.0 version the amp-twitter-0.1 works as expected check this example for reference.

ezgif com-gif-maker

Reproduction Steps

Open https://bento-twitter-intersection-observer-issue.glitch.me URL and scroll quickly to the Twitter embed the embed should appear in non expanded state.

Relevant Logs

Uncaught (in promise) Error: changeSize attempt denied
    at Object.callback (mutator-impl.js:79)
    at Pj (resources-impl.js:927)
    at h (resources-impl.js:1642)
    at Gj.setState (finite-state-machine.js:53)
    at Ij.g.doPass (resources-impl.js:643)
    at resources-impl.js:538
    at Ll (vsync-impl.js:456)
    at Hl.g.Bh (vsync-impl.js:413)

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

About this issue

Original URL
State: open
Created 3 years ago
Comments: 17 (15 by maintainers)

Most upvoted comments

OK, right. So the issue is that Twitter is deferring the initialization until it comes inside the viewport. I guess the only two options I see are:

See if Twitter’s createTweet function can be forked to initialize when further away from the current viewport, or else contact Twitter to see if they can essentially add a renderOutsideViewport parameter to createTweet.

I wonder if we can somehow hack this. When the embed is out of view we could initially style the actual twitter embed as position: fixed; opacity: 0; pointer-events: none. From the embed’s perspective, this might trick it into believing it’s in viewport and trigger the resize events. Once we get a resize event, or the container comes into view, we can revert to position: static.

alanorozco on Feb 17, 2022

@alanorozco Thanks for your suggestion I have created a PR https://github.com/ampproject/amphtml/pull/37740 with your mentioned workaround with this the embed now gets resized as soon as the component gets built when shown below the fold. Can you review and provide any necessary feedback.

deepaklalwani97 on Feb 21, 2022