1

I have been facing a really weird issue in Internet Explorer 11 and Microsoft Edge (not in Chrome nor Firefox).

I'm using a navbar with a dropdown menu (styled by Bootstrap).

It looks like this:

-------------------------------------------------------------------
brand image                                         qa1 qa2 user _
-------------------------------------------------------------------
Reporting _
-------------------------------------------------------------------

(the underscore denotes a caret)

The markup is as follows:

<div class="navbar-fixed-top">

  <nav class="topbar">
    <div class="container">
        <!-- hamburger + brand image: I guess not important for the issue -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"/>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
            </button>
            <a class="navbar-brand" href="/mvc/">
                <img alt="" src="/mvc/static/images/client_logo.png" />
            </a>
        </div>

        <!-- quick actions + user menu -->
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">

                <li class="visible-sm visible-md visible-lg">
                    <a href="#" onclick="SomeHandler(); return false;" title="qa1">
                        <span class="icon icon-something"/>
                    </a>
                </li>

                <li>
                    <a href="https://localhost:4820/mvc/somewhere" target="_self" title="qa2">
                        <div class="notification-icon">
                            <span class="icon-notification-bell"> </span>
                        </div>
                    </a>
                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">username<span class="icon icon-user"/>
                        <span class="caret"/>
                    </a>

                    <ul class="dropdown-menu  wfc-usermenu" role="menu">
                        <li>
                            <a href="/mvc/User/ChangePassword" target="_self">Change password</a>
                        </li>
                        <li>
                            <a href="/mvc/User/Logout" target="_self">Logout</a>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>

    </div>
</nav>

<nav class="visible-sm visible-md visible-lg navbar navbar-default menubar">
    <div class="container">
        <ul class="navbar-nav nav" id="menu">
            <li class="root-menu-item dropdown"> <!-- #!# -->
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="/mvc/Reporting" role="button">Reporting<span class="caret"/>
                </a>
                <!-- this ul is not always shown -->
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="/mvc/Reporting/EmployeeOverview">Employee reports</a>
                    </li>
                </ul>
            </li>
            <!-- in reality there are more menu items, but you get the idea -->
        </ul>
    </div>
</nav>

</div>

What happens is that, when the page loads and when I choose 'Reporting' from the menu, nothing happens. The dropdown is not shown. However, I can see that the open css class is set on the list item marked with #!#. When I resize the browser window, the sub menu suddenly shows up (likewise when F12 DOM explorer is open and I select a certain piece of markup), and after that, I can happily open and close the sub menu as many times as I want to. It feels as if IE (and Edge) can't draw it at first, but are forced to redraw when resizing or doing other things.

The navbar-fixed-top css class seems to be the deal breaker here, providing the position: fixed property. If I omit this (and only this) property, everything works fine.

When I set compatibility mode to IE9, it also works (yay!).

There are no errors in the F12 console.

As the page is quite complex, I can't really strip it down to the bare essentials and provide you with a full page (I started doing that, but it would take ages). I'm aware that you will probably not be able to reproduce it and this will probably not provide some concrete answers, but still I'd be happy with some advice ("try this", "try that").

I am using jQuery 2.1.4 and Bootstrap 3.3.4 (next to angular, moment, lodash,...)

bvgheluwe
  • 853
  • 7
  • 25
  • Hi, I can see markup errors. Make sure you have set up IE to record console warning messages. Internet Options>Advanced tab, check "Always record developer console messages". Save changes. To debug a web page, you need to turn on the error logging in the IE dev tool. – Rob Parsons Apr 16 '17 at 01:02
  • f12>Debug tab, select "Break on all exceptions" from the dropdown (looks like a stop sign), then without closing the dev tool return to your web page and reload or continue testing..... The dev tool will not break on errors unless it is visible (pin it to the browser tab). – Rob Parsons Apr 16 '17 at 01:04
  • @RobParsons, would you care to show the markup errors? The div inside the anchor tag maybe? – bvgheluwe Apr 18 '17 at 07:27
  • Hi, we need to see what 'the hamburger brand image' is.. . If its a third party content hosted in an iframe it may be missing the wmode attribute. – Rob Parsons Apr 20 '17 at 22:40
  • Set up IE as follows.... Tools>Internet Options>Advanced tab,check "Always record developer console messages".... now when you display the dev tool it will list markup, scripting and blocked content messages. To inspect the injected or computed markup of the "hamburger brand image" right click on it and select "Inspect Element" from the context menu. The dev tool will open at the DOM Explorer tab at the element selected.... I expect that the "hamburger brand image" is actually a flash animation in an iframe, not a png (/image). – Rob Parsons Apr 20 '17 at 22:47
  • Oh, I see what you mean, but `` is just a (seemingly not so clarifying) comment for the following `
    `
     – bvgheluwe Apr 21 '17 at 21:45
  • 1
    Hi, could you please post a screen shot.or a reproduction url... also which IE Emulation mode is your web application using? f12>Emulation tab, see http://stackoverflow.com/questions/5227331/html5-new-elements-header-nav-footer-not-working-in-ie – Rob Parsons Apr 25 '17 at 19:04
  • Thanks for your continued questions, but we eventually "solved" it by re-reading the datasource of a kendo grid we're using on the page. I realize that it doesn't really sound as a solution (we're not truly happy with it), but it was a strange issue anyway. Emulation mode was `Edge (default)`, btw. – bvgheluwe Jun 01 '17 at 07:26

0 Answers0