Hello,
I am using oembed to embed arbitrary tweets on a site I am building. I have included this:
<script>
window.twttr = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.twttr || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "twitter-wjs"));
</script>
on the page and have omit_script=true in the oembed request. My oembed request looks like this:
https://publish.twitter.com/oembed?format=json&hide_thread=true&dnt=true&omit_script=true&url=[tweet-url]
I then place the returned html into my site. On desktop, everything works fine. On mobile, specifically chrome for android, it sometimes works. Sometimes appears and then promptly disappears leaving a tweet sized empty box in the DOM. It sometimes disappears leaving no empty box visible. Sometimes appears but seemingly missing CSS and looking like a hot mess.
I have tried using the desktop chrome dev tools to shrink my browser window to the size of a phone screen and everything works fine so I don’t think this is simply a layout issue.
I have tried to debug this using the chrome dev tools but no errors show up in the console nor do any requests appear to be failing.
I’m not sure what next steps I can take to debug this… Any tips would be greatly appreciated.
Thanks
Jono