Twitter feed is not loading in IE 11

[PierreCorriveau]

Hi, as anyone experienced any issues with the Twitter feed in IE?

It works well in the other browsers and it was working well in IE before today. According to the Twitter's website, IE is not supported:

We officially support versions of the following browsers from the past year on twitter.com:

Edge (https://microsoft.com/edge)
Safari (https://www.apple.com/safari)
Chrome (https://www.google.com/chrome)
Firefox (https://www.mozilla.org/firefox)
Any browser based on Webkit / Chromium engines (Opera, Samsung Internet, UCBrowser, etc.)

Do you guys plan to have a layer on top of that to support it in IE?

Thanks!

[ghost]

If your talking about https://wet-boew.github.io/v4.0-ci/demos/twitter/twitter-en.html the generated timeline is completely controlled by twitter there would be no way to make it work on IE11.

I even tested twitters own website that demos the code and it does not work on IE11 (https://publish.twitter.com/).

What I would recommend is on IE11 the spinner (loading icon) should be disabled and maybe an incompatible browser message or hide it.

I am just a volunteer on this GitHub project.

[PierreCorriveau]

Thanks, will do!

[ghost]

@duboisp Hey this should also be updated on WET side. Is there already code that detects if it IE? If not should this be coded using window.navigator.userAgent?

[PierreCorriveau]

Until then, we will use:

SCRIPT

<script> function isIE() { ua = navigator.userAgent; /* MSIE used to detect old browsers and Trident used to newer ones*/ var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1; return is_ie; } /* Display a text message */ if (isIE()){ $('#ienotsupportedmessage').text("Your browser does not support the display of the Twitter feed. Please try another browser."); } </script>

HTML
<p id="ienotsupportedmessage"></p>

[ghost]

@duboisp @EricDunsworth @GormFrank @StdGit Any ideas on how to address this so it would accessible for users using IE11?

Current suggestions:

• Hide twitter feed
• Display non-supported message
• Display a twitter link

[StdGit]

Here my one cent
1- Remove the twitter feed (Spinning wheel) but keep the link that is appearing in ie11 https://twitter.com/WebExpToolkit and don't close the issue.
2- Find a way to to solve the issue if possible, if not
3- Remembering our value https://wet-boew.github.io/wet-boew/index-en.html#accessibility and the goal of WET, I suggest we remove this functionality after a certain delay and a warning to the developers (I would say 3 long time versions).
4-) I also suggest to list somewhere (perhaps under https://wet-boew.github.io/wet-boew-documentation/decision/index-en.html) the components that we have decided to retire or won't implement

[PierreCorriveau]

The spinning wheel is removed automatically and the link to the Twitter account stays so technically, it is still accessible.

Considering that 13% only of our visitors (CAL's website) uses IE, removing this widget from WET does not make sense to us. Why would you penalize 9 people out of 10... I suggest that a script detect the browser type and display a message when using IE. We have other ways to implement it but not every department has this privilege with AEM. Also, the government want to implement a new default browser so IE is pretty much dead.

The Twitter feed is a useful tool to communicate with the public and Twitter is not ready to die yet.

[StdGit]

@PierreCorriveau

The spinning wheel is removed automatically and the link to the Twitter account stays so technically, it is still accessible.

I am not an expert, but when I tested the issue in Firefox the wheel was removed after a moment in ie11 the spinning wheel was running indefinitely ... So the wheel should be removed for sure in ie11.

If we remove the wheel in ie11 and everybody has a link, the experience is not the same in all the browsers (Some have a spinning wheel when the network is slow)

Remember also that Wet is an open project and it is used outside the government,

If Twitter is not supported in ie11, what will happen after the user click the link. (What is it missing or not functional).

Finally I have given only my 1 cent, I didn't make a full analysis.

I wish you a Merry Christmas

[ghost]

I can also confirm it runs indefinitely in IE11 the spinner as that is being added by WET and not Twitter.

[PierreCorriveau]

Good to know, thanks for sharing. We will use WET 4 for our next website starting in April 2020 so it's good to know any issues in advance.

If you are a lucky and you have access to the code. Add this to your page and that should do it:

SCRIPT (head or end of body section)
<script>
function isIE() {
ua = navigator.userAgent;
var is_ie = ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1; return is_ie;
}
if (isIE()){
$( ".wb-twitter a" ).removeClass( "twitter-timeline" );
$('#ienotsupportedmessage').text("Your browser does not support the display of the Twitter feed. Please try another browser.");
}
</script>

HTML (close to the Twitter widget)
<p id="ienotsupportedmessage"></p>

In terms of accessibility, one more click to access the Twitter account from IE is not the end of the world.

[StdGit]

You should try to incorporate your solution in WET, so it will be done for everyone.

[ghost]

This is the twitter file that would need to be updated: https://github.com/wet-boew/wet-boew/blob/master/src/plugins/twitter/twitter.js

[PierreCorriveau]

I might have some time after the holidays to test it in our new CMS that implements WET4. If the code is successful, I will propose a modification to the twitter.js file and leave a comment here. Thanks.

[PierreCorriveau]

Does anyone know where twitter.js is located in the WET 4 folders? I can't find it nor test it.

[ghost]

If you have a forked copy of the repo it’s in src -> plugins -> twitter -> twitter.js.

Production downloads merge all the plugins into wet-beow.js (except for polyfills or 3rd party add-ons).

[PierreCorriveau]

Here is a propose update to twitter.js: #8800!

[duboisp]

Is there already code that detects if it IE?

Yes, there is a property named wb.ie11 which will be true if the browser is IE11

Regarding the fix, it will be preferable to follow a progressive enhancement design approach where it will be to ensure the alternate solution is available and functional instead of displaying a message saying explicitly the plugin is not supported by that specific old browser.

@PierreCorriveau it will be preferable to educate the QA team or/and the content expert to explain them the expected behaviour of the twitter timeline with IE11 which is aligned with the progressive enhancement design approach.

Just to note that I didn't reproduced the issue yet. So if the user interface look broken in IE11, like if loading spinning icon remain there, it will be preferable to fix the UI instead keeping the broken UI for IE11 because IE11 is still a supported browser by WET-BOEW.

[ghost]

It not something that can simply be "fix" as the timeline is generated by Twitter. If Twitter has decided to move past IE11 there is no "fix" for that, but as I mentioned above instead of a timeline you could display a twitter link or social button.

Only downside with a social button is the user may not have the best experience on the twitter site since there no longer supporting IE11, but that is also out of WET hands.