Timeline Express and fixing the Internet Explorer Opacity Issue

There is a major issue I’ve run across for users of Internet Explorer 11 (and probably 10) where timelines are not visible.  It is related to how IE 11 supports the CSS opacity property.  For all other browsers it functions as expected.  And yes, I’m fully on board with the “wouldn’t it be great if Internet Explorer didn’t exist anymore” group, but alas, some people still use it which makes it necessary for the timeline to function with IE 11

Here’s the source of the problem

The following items in the below files contain opacity settings that affect timeline display in Internet Explorer 11;

opacity: 0; - /plugins/timeline-express-pro/lib/public/css/timeline-express.css  (line 32 of version 2.3.0)

opacity: 0 - /plugins/timeline-express-pro/lib/public/css/timeline-express.min.css (line 8, column 427 - 436  of version 2.3.0)

style="opacity: 0;" - /plugins/timeline-express-pro/lib/clases/class-timeline-express-initialize.php (line 212 of version 2.3.0)

I’ve tested this on the main website we use the Timeline Express software on (and we’ve customized it a bit) as well as a “virgin” installation of Timeline Express using various themes with all plugins turned off.  The behavior is the same on both sites under all circumstances.

The Quick Fix

Removing the opacity attribute in the above three files fixes the issue and does not seem to cause any changes for other browsers.  Although I suspect there’s probably some animation setting we don’t use on our website or I’m not noticing where this comes into play.

Attempted Solutions using CSS

In regards to the Timeline Express CSS Files: The “ms-filter” feature has been deprecated for Internet Explorer 11 (and 10), so it does not provide an avenue to fix the issue. The other “filter” settings meant for IE 5-7, Netscape, Safari, etc. have no effect in this instance either. I also experimented with the RGBA CSS setting as well as the CSS display attribute, zoom:1;,  but nothing worked to solve the IE 11 issue.

The Solution

I added a Javascript function into my child theme’s function.php file which results in the below code being inserted into every page where there’s a timeline (credit where credit is due, based it on code from here: https://www.w3docs.com/snippets/javascript/how-to-detect-internet-explorer-in-javascript.html);

<script>

function IEdetection()

{

var ua = window.navigator.userAgent;

var msie = ua.indexOf('MSIE ');

var trident = ua.indexOf('Trident/');

if (trident > 0)

       {

       var rv = ua.indexOf('rv:');

       return (parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10));

       }

return;

}

var result = IEdetection();

if (result == '11')

       {

       document.getElementById("cd-timeline").style.opacity = "1";

       }

</script>

The above code can be condensed, but I wrote it like that to make it more clear what it did.

Also, after correcting the “opacity issue” to make the timeline display, the alignment of the icon and the “announcements” seems to be off too, but I didn’t come up with a solution for that, except to add a warning to the site to use a different web browser. But at least the timeline displays now.