By ptocco on

We have a problem with some links not working in IE Edge. Most of the links in the header and slider sections of the index page don't work in Edge:

https://datascience.nih.gov/index

This includes the links at the very top, the links in the Learn More buttons, the main nav across the slider, and the secondary nav below the slider. Nor does the search box work. Other than than that, all the other links work, starting right below the secondary nav bar.

As soon as you go into F12 Emulation mode and select IE 10 or 9, all the links and functionality return. Or if you browse to other pages in IE Edge, the site works fine, including the same nav menu and header links that didn't work on the home page. Note that all other browsers can handle the home page without issues. There's just something about IE Edge.

I checked everything I could think of, including console errors, doc type, IE compatibility mode, etc. and came up with nothing! I looked into a number of minor issues and fixed a few things but to no effect on the link failure.

I tried using IE's DOM Inspector tool, where you just click and get info, but it doesn't let me select individual header components when in Edge, while normally the Dom Inspector can select many things in the header.

Here's the starting html code: 

<!DOCTYPE html>
<html lang="en">
<head profile="http://www.w3.org/1999/xhtml/vocab">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

Unfortunately, very little information is to be found by Googling this problem. 'Some links in IE Edge not working' is the way I phrased it.

This has definitely won my "Drupal Mystery of the Day" award. Clues and suggestions are most welcome.

⋅ Categories: Drupal 7.x

Comments

Jaypan’s picture

Jaypan commented

I don't have a windows computer handy to check, but usually issues like this come about when another invisible element is layered over top the link you cannot click. You said you cannot select the links with the DOM inspectors - is that maybe because you are only able to select the element that is layered over top? If so, then it's probably a CSS issue that needs adjustment for IE.

ptocco’s picture

ptocco commented

Thank you Jaypan, I think you're right that a css element is obscuring other elements. The slider is based on the jquery.flexslider.js, not the Flexslider module. There are 46 usages of z-index in my main css, covering many parts of the slider. There is a newer version of the flexslider code available so I will upgrade and report back if that helps.