Embedded tweet not rendering until orientation change on ipad/iphone

houdmont · 2013-04-16T15:06:46.000Z

I’m using the embedded tweet on my website, and it works perfectly on all desktop browsers.

However when the page first loads on a mobile browser (confirmed on iphone safari & chrome, and ipad safari) the original blockquote shows, but doesn’t get replaced by the embedded tweet.

If I change the orientation of the device, the javascript seems to finally kick in, and replace the block quote with the embedded tweet.

Is this a known problem? Is there a workaround for it, to trigger the javascript on page load on mobile devices?

Thanks,
Tom

benward · 2013-04-16T22:48:50.000Z

Can you share a link to the specific page that does this?

Our code is set up to only remove the blockquote when the replacement is ready—that way, if a Tweet is deleted, or if our service goes down at any point, the content will still make sense with quotes intact. Mobile browsers obviously process a little slower than their desktop counterparts and we’re looking to better optimised it to reduce the number of inconsistent behaviours crop up, but there are a lot of things that cause variation.

If the orientation change is triggering the update, it may just be that the browser isn’t redrawing. If you gave a URL I can take a look though.

Thanks,

Ben

houdmont · 2013-04-17T08:04:45.000Z

Hi,

I can’t provide a public link of the actual page, but I have created a codepen of the situation.

CodePen

Embedded Tweet

Embedded tweets do not appear to render when initially loaded on mobile safari/chrome. This is a test page used to replicate the bug....

On desktop this loads just fine, however when viewed on mobile safari at least, the embed doesn’t render, (not even on orientation change in this case).

Do you know of some quick line of js or something which can be run on page load to trigger a redraw event? Or something I can do to force the twitter javascript to activate?

benward · 2013-04-17T18:37:43.000Z

Thanks for the examples Tom.

I’ve been able to reproduce it in the iOS simulator (thankfully) so working on a fix on our side now. If you want to force it, you just need to trigger a resize event in the page and the frames will snap into play. This is why changing orientation works on some sites, as the page width changes. In the codepen example I think the virtual size of the page doesn’t change, instead it zooms the content, so doesn’t fire the event ever.

Ben

benward · 2013-04-17T21:52:43.000Z

Hi again Tom. Just deployed a fix for this, and the codepen test page seems to be working now. Please confirm if your website is working OK now.

Regards,

Ben

houdmont · 2013-04-18T12:32:32.000Z

That’s fixed it!

Many thanks for looking into it.

Tom

vietxitin · 2013-06-10T07:42:00.000Z

Hi BenWard.
Can you give us solution to fix problem when twitter feed when run on mobile?
We have same problem with Embedded tweet. When view on desktop it’s work normal but on on mobile it’s disapper.
Can you help me check area above footer on this link
http://demo.joomlashine.com/joomla-templates/jsn_air/pro/index.php

Thanks you very much.

jonmann20 · 2013-07-08T17:22:53.000Z

fyi setting #twitter-widget-0 { width: 100% !important; } also causes this issue (on Android v.2.3.x)

niall · 2016-02-06T06:03:33.927Z