Twitter widget sometimes fails to render on iOS

[cramforce]

This repros about 50% of the time on https://www.google.com/amp/s/www.washingtonpost.com/amphtml/news/the-fix/wp/2017/02/09/donald-trump-finally-met-his-match-the-courts/?client=safari

If it does not repro after a few tries restart Safari and try again.

The tweet will load eventually, but it often take 1 to 2 minutes.

Based on the network tab the requests to get the tweet content run much earlier. When it renders only CSS files and the user images are retrieved.

It seems that this may be a bug in Safari where Safari somehow fails to realize that the frame is in view and throttles its painting.

[cramforce]

CC @indianburger

When you inspect the iframe in Safari devtools it always immediately renders correctly

[cramforce]

Also repros without viewer https://cdn.ampproject.org/c/s/www.washingtonpost.com/amphtml/news/the-fix/wp/2017/02/09/donald-trump-finally-met-his-match-the-courts/?client=safari

[cramforce]

I dug a bit deeper and the problem is definitely that the promise returned by twttr.widgets.createTweet (https://github.com/ampproject/amphtml/blob/master/3p/twitter.js#L74) never resolves. @indianburger solved this before in a similar situation. My guess is that Safari throttles a requestAnimationFrame and then never runs it.

A few suggestions

• Do not use requestAnimationFrame when framed
• also call a setTimeout and flush rendering based on that when it arrives earlier.

[cramforce]

Here is the last bug there this same thing happened #3220 @indianburger fixed it on Twitter's side.

[indianburger]

Thanks for flagging it and digging into the problem. A fix was deployed last night/this morning for this.

The culprit was indeed requestAnimationFrame which we use for batching DOM reads and writes, and requestAnimationFrame gets really throttled in mobile safari. The fix was to back it up with a setTimeout as suggested. The setTimeout is not aggressive (500ms) to allow requestAnimationFrame to work in normal circumstances. Sometimes it takes 2-3 seconds for all the timeouts to expire before the Tweet is rendered in mobile safari.

Let me know if you still see issues on your end.

[cramforce]

Thanks @indianburger. We'll monitor!