Embedded tweet not showing ic-mask icons in IE8 doc mode

[legostud]

Hi Folks,

We’re trying to allow our user to embed tweets in their blog posts, but the Reply, Retweet, and Favorite icons aren’t displaying properly when we test the new page in IE7 or IE8 document mode (using IE10 developer tools). The links are there and in the correct location, but the icon image isn’t being displayed. It appears that the background image is potentially a different size, because I can get the image to show up if I adjust the background-position attribute.

Just to rule out any code on our site, I created an html page with only the embedded code and I was able to reproduce the issue.

I don’t think there is anything that we can do to resolve this on our end since the rendered tweet is contained within an iframe. Is this a known issue that might get fixed soon?

Jonathan

[brenbrenbren]

I can confirm this issue, have a pretty good idea of why it’s occurring and have an interim workaround.

Scenario:

• A single Tweet embed code has been taken by using the “More > Embed Tweet” option
• This embed code has been placed in a HTML file named "embed.html"
  example:
  http://dump.mckitrick.io/twitter/embed.html
• “embed.html” is iframed into the main page
  example:
  http://dump.mckitrick.io/twitter/iframe.html

Issue:
When the main page in IE8 is shown, icons (reply, retweet, favorite, etc) do not render correctly and appear to be positioned wrongly.

Screenshot:
http://dump.mckitrick.io/twitter/embed_iframe_ie8.png

IE9 and IE10 work correctly. All other standard desktop browsers work correctly.

Causes and caveats:

• IE8 is referring to the “timeline.2x.css” stylesheet on platform.twitter.com, which is presumably the Retina stylesheet
  Screenshot:
  http://dump.mckitrick.io/twitter/embed_iframe_ie8_css.png

• IE8 uses the default stylesheet and renders the buttons correctly when the widget is not inside an iframe

• Am assuming that Javascript or media queries to detect screen resolution and define the stylesheet to use are failing or defaulting to 2x - only when within the iframe context.

Workaround / fix:
In “widget.js”, use Javascript detection for IE8 and force the default stylesheet.

For IE8, change:
twttr.widgets.config.assetUrl() + “/” + t

to:
twttr.widgets.config.assetUrl() + “/embed/timeline.css”

[benward]

Thank you, Brendan, for the detailed debugging. It’s spot on.

We fixed an issue recently to add detection of high-resolution displays on Windows with an equivalent calculation to WebKit’s devicePixelRatio, but it appears to be buggy within iframe dimensions. We’ll try and tighten that up a bit.

B

[niall]