AngularJS app not rendering properly in IE 8 for multiple reasons

javascript internet-explorer angularjs internet-explorer-8 angularjs-directive

11,901

I am working on a AngularJs project at the moment and we also need to give support to IE8.

Everything is working fine as expected.

I took a look at your code and I can see you have included few things to make AngularJs work with IE 8.

But at the same time I think you missed some bits, so it's worthwhile take a look again at this page - AngularJs IE

As we are dealing with a really unreliable browser as IE 8, I would strongly suggest you to follow the instructions on the page word by word.

For example: I didn't find this line on your code above <html xmlns:ng="http://angularjs.org">

You also wrote this line <body id="ng-app" ng-app="maxmythicApp">

BUT the official page suggests this format: <html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="optionalModuleName">

And you put the ng-app inside the <body> tag instead of the <html>.

These details might not make a big difference for modern (and decent) browsers, but we are talking about IE 8 so every little details does matter - ('play by the book').

About the hash(#), that's a normal behaviour of AngularJs. AngularJS offers two configuration modes to control the format of the URL: Hashbang mode (the default) and the HTML5 mode which is based on using the HTML5 History API.

IE8 clearly doesn't support HTML 5 history API so the Hashbang mode is used instead.

You can read about all of this here.

Hope that helps.

11,901

Admin

Updated on June 29, 2022

Comments

Admin almost 2 years

I have been working on a portfolio site called maxmythic.com using AngularJS and have managed to get it to show up good in everything but IE 8 and 7 (I'm not even bothering with IE 6). I even added all the IE8 AngularJS fixes found http://docs.angularjs.org/guide/ie and http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html I thought those fixes would make it work but its seems like nothing changed.

At http://maxmythic.com/ and http://maxmythic.com/design, a 3 x 6 grid of 'design tile' divs (with titles and background images) are supposed to display. It gets created by ng-repeat in the Angular view called design.html

<section ng-controller="MainCtrl" class="main">
  <a href="#" ng-repeat="tile in designTiles" ng-href="{{tile.url}}" class="{{tile.bgImageClass}}">
    <div ng-mouseenter="blankBar='blueBar'" ng-mouseleave="blankBar = 'blankBar'" class="tile-info">
    <div class="blankBar" ng-class="blankBar"></div>
      <h3 class="tile_title">{{tile.title}}</h3>
    </div>
  </a>
</section>

In IE 8, ngRepeat will seem to overwrite each design tile div with the next design tile div in the order they appear in my designTile object list

angular.module('maxmythicApp')
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      {
        url : '/design/vance-and-gary-unhinged',
        bgImageClass : 'vance-and-gary-unhinged',
        title : 'Vance & Gary Unhinged',
        // use : 'Album Art'
      },
      {
        url : '/design/dam-funk',
        bgImageClass : 'dam-funk',
        title : 'Dam-Funk',
        // use : 'Logo'
      },
      .....
      .....
      .....
      {
        url : '/design/various-sketches',
        bgImageClass : 'various-sketches',
        title : 'Various Sketches',
        // use : 'Logo'
      },
      {
        url : '/design/maxmythic-dot-com',
        bgImageClass : 'maxmythic-dot-com',
        title : 'maxmythic.com',
        // use : 'Logo'
      },
    ];
  });

As the page is loading, I can see the first one appear but, as soon as it appears, it gets replaced by the next one. Only one design tile div is ever seen at one time and ultimately the last design tile equates to the last object in the the designTile list which is:

{
  url : '/design/maxmythic-dot-com',
  bgImageClass : 'maxmythic-dot-com',
  title : 'maxmythic.com',
},

If I look into IE's developer tools HTML tab I see what seems to be a messed up out of order DOM and look, you can see all the 18 design tile divs displayed there. It all looks like this

enter image description here

So none of the design tiles show up there but if I look at the original source it looks totally different. In fact, the <section> element that contains the list of design tile divs does not even appear.

<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>/\/\/\</title>
    <meta name="fragment" content="!">
    <meta name="description" content="Max Mythic : Designer & Front-end Developer">
    <link rel="apple-touch-icon" href="apple-touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png">
    <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-retina.png">  
    <link href="favicon_32x32.ico" rel="icon">      
    <!--[if IE]><link rel="shortcut icon" href="mm_favicon_32x32.ico"><![endif]-->
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="apple-touch-icon-retina.png">
    <meta name="viewport" content="width=device-width">
    <base href="/">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="stylesheet" href="styles/aff564d2.main.css">
  </head>
  <body id="ng-app" ng-app="maxmythicApp">

    <div id="page">
      <header>
        <h1 class="logo">
          Max Mythic : Designer, Illustrator & Developer
          <a href="/">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z"></svg>
          </a>
        </h1>
        <nav class="pagenav" role="navigation">
          <ul>
            <li>
              <a href="/design">
                design
              </a>
            </li>
            <li>
              <a href="/about">
                about
              </a>
            </li>
            <li>
              <a href="/contact">
                contact
              </a>
            </li>
          </ul>
        </nav>
        <!-- <div class="navicon">Nav Icon</div> -->
      </header>
    <!--[if lt IE 7]>
      <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
    <![endif]-->

    <!--[if lt IE 9]>
      <script src="components/es5-shim/es5-shim.js"></script>
      <script src="components/json3/lib/json3.min.js"></script>
    <![endif]-->

    <!-- Add your site or application content here -->
      <div class="container" ng-view=""></div>
      <div id="layout_footer"></div>
    </div>
    <footer role="footer" id="footer">
      <ul>
        <li>
          <a class="icon" target="_blank" href="https://www.facebook.com/maxmythic">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30"><path d="M13.359,14.948H9.168c0,6.7,0,14.949,0,14.949H2.955c0,0,0-8.165,0-14.949H0V9.671h2.955V6.25 c0-2.448,1.162-6.269,6.271-6.269L13.827,0v5.126c0,0-2.798,0-3.34,0c-0.545,0-1.317,0.271-1.317,1.437v3.109h4.736L13.359,14.948z"></svg>
          </a>
        </li>
        <li>
          <a class="icon" target="_blank" href="https://twitter.com/maxmythic">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30.246 24.584"><path d="M27.149 6.125c0.015 0.3 0 0.5 0 0.803c0 8.201-6.242 17.656-17.657 17.656c-3.504 0-6.768-1.027-9.513-2.787 c0.484 0.1 1 0.1 1.5 0.086c2.908 0 5.584-0.992 7.707-2.656c-2.715-0.051-5.006-1.846-5.796-4.311 c0.378 0.1 0.8 0.1 1.2 0.109c0.566 0 1.114-0.072 1.635-0.217c-2.84-0.568-4.979-3.08-4.979-6.084 c0-0.025 0-0.053 0.001-0.08C2.05 9.1 3 9.4 4 9.422C2.358 8.3 1.3 6.4 1.3 4.3 c0-1.137 0.306-2.204 0.84-3.12C5.166 4.9 9.7 7.4 14.9 7.619c-0.104-0.453-0.161-0.93-0.161-1.414 C14.734 2.8 17.5 0 20.9 0c1.785 0 3.4 0.8 4.5 1.959c1.414-0.277 2.742-0.795 3.94-1.506 c-0.465 1.449-1.446 2.666-2.729 3.433c1.258-0.149 2.453-0.483 3.565-0.977C29.417 4.2 28.4 5.2 27.1 6.125z"></svg>
          </a>
        </li>
        <li>
          <a class="icon" target="_blank" href="https://plus.google.com/113556551990494099731">
            <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 28.939 29.768"><path d="M15.263 16.994l-1.396-1.084c-0.426-0.354-1.007-0.818-1.007-1.67c0-0.855 0.581-1.399 1.086-1.903 c1.626-1.28 3.251-2.642 3.251-5.513c0-2.952-1.856-4.504-2.748-5.241h2.4L19.368 0h-7.633c-2.094 0-5.111 0.496-7.32 2.3 c-1.666 1.437-2.479 3.418-2.479 5.2c0 3 2.3 6.1 6.4 6.098c0.389 0 0.813-0.038 1.238-0.078 c-0.191 0.466-0.386 0.854-0.386 1.515c0 1.2 0.6 1.9 1.2 2.637c-1.744 0.121-5 0.314-7.4 1.8 C0.694 20.8 0 22.8 0 24.215c0 2.9 2.7 5.6 8.3 5.553c6.662 0 10.189-3.688 10.189-7.336 C18.517 19.8 17 18.4 15.3 16.994z M10.188 12.529c-3.333 0-4.843-4.31-4.843-6.908c0-1.012 0.19-2.058 0.851-2.874 C6.818 2 7.9 1.5 8.9 1.465c3.214 0 4.9 4.3 4.9 7.143c0 0.7-0.077 1.939-0.969 2.8 C12.198 12.1 11.2 12.5 10.2 12.529z M10.227 28.14c-4.145 0-6.817-1.981-6.817-4.74c0-2.756 2.479-3.688 3.331-3.995 c1.626-0.548 3.72-0.623 4.067-0.623c0.388 0 0.6 0 0.9 0.039c2.946 2.1 4.2 3.1 4.2 5.1 C15.923 26.3 13.9 28.1 10.2 28.14z"><polygon points="25,12.5 25,8.6 23.1,8.6 23.1,12.5 19.3,12.5 19.3,14.4 23.1,14.4 23.1,18.3 25,18.3 25,14.4 28.9,14.4 28.9,12.5"></svg>
          </a>
        </li>
        <li class="madeby">
          <p>Made by</p>
          <svg class="maxmythic" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 97 27.623"><style>.style0{fill:#666666;}</style><path d="M97 27.623h-3.73c-3.687 0-6.687-4.524-8.917-13.448C82.29 5.9 79.8 3 78.3 3c-1.481 0-3.943 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.916 13.448s-6.687-4.524-8.918-13.448C52.444 5.9 50 3 48.5 3c-1.482 0-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448s-6.686-4.524-8.916-13.448C22.598 5.9 20.1 3 18.7 3s-3.944 2.927-6.006 11.2 c-2.23 8.923-5.23 13.448-8.917 13.448H0v-3h3.73c1.482 0 3.945-2.927 6.007-11.175C11.968 4.5 15 0 18.7 0 s6.686 4.5 8.9 13.448c2.062 8.2 4.5 11.2 6 11.175c1.482 0 3.945-2.927 6.007-11.175C41.814 4.5 44.8 0 48.5 0 c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175c1.481 0 3.943-2.927 6.006-11.175 C71.66 4.5 74.7 0 78.3 0c3.687 0 6.7 4.5 8.9 13.448c2.063 8.2 4.5 11.2 6 11.175H97V27.623z" class="style0"></svg>
        </li>
      </ul>
    </footer>


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>

    <script src="scripts/cdf6190d.scripts.js"></script>

    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
      var _gaq=[['_setAccount','UA-37437533-1'],['_trackPageview']];
      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
      s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>
  </body>
</html>

Additionally, IE 8 throws the following error

TypeError: Unable to get value of the property 'childNodes': object is null or undefinedundefined

Another funny thing is that if I enter http://maxmythic.com into the address bar, IE8 will add a # (hashtag) turning that original URL into http://maxmythic.com/#/. This screws up the pretty URL structure I had going with HTML5 mode.

On top of all of that 98% of my CSS is not being applied to the html. Maybe that is a separate question all together but I thought I'd mention it just in case anyone had run into all of these issues before and had a solution.

All of the site's files can be viewed at my gh-pages repo here https://github.com/siddhion/maxmythic/tree/gh-pages

Any ideas on what is going on here and how to solve it?