Tweet with image when embeded, showing only the text & not loading the image in iOS App


#1

The embed code-block for the tweet:

<blockquote class="twitter-tweet" data-cards="visible"
lang="en"><p><a href="http://twitter.com/hashtag/DailySoapLogic?src=hash">#DailySoapLogic</a> <a href="http://t.co/4w03n0gAhS">pic.twitter.com/4w03n0gAhS</a></p>&mdash; That Everyday Girl!! (@Nikita_garg14) <a href="http://twitter.com/Nikita_garg14/status/527357868840726529">October 29, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

When debugged using inspect element, it generates HTML snippet within iOS App in simulator as below:

<div class="img-holder" style="height: 94%;"><iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" allowfullscreen="" style="width: 1px; height: 0px; border: none; position: absolute; visibility: hidden;"></iframe><blockquote class="twitter-tweet" data-cards="visible" lang="en" data-twttr-rendered="true"><p><a href="http://twitter.com/hashtag/DailySoapLogic?src=hash">#DailySoapLogic</a> <a href="http://t.co/4w03n0gAhS">pic.twitter.com/4w03n0gAhS</a></p>— That Everyday Girl!! (@Nikita_garg14) <a href="http://twitter.com/Nikita_garg14/status/527357868840726529">October 29, 2014</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>

from browser:

<div class="img-holder" style="height: 94%;" data-twttr-id="twttr-sandbox-2"><iframe id="twitter-widget-2" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-tweet twitter-tweet-rendered" allowfullscreen="" style="display: block; max-width: 99%; min-width: 220px; padding: 0px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; margin: 10px 0px; border-color: rgb(238, 238, 238) rgb(221, 221, 221) rgb(187, 187, 187); border-width: 1px; border-style: solid; box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 3px; position: static; visibility: visible; width: 305px;" title="Embedded Tweet" height="342"></iframe>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script></div>

Issue: only within the webview in App for iOS (simulator & devices), the image is not loading for the tweet; its generating an iframe element with style having “visibility: hidden;” and displaying the text content alone;
The same embed code-snippet seems to work fine for Android App & all the browser versions, even works fine in Safari browser in iOS devices.


#3