title: Onclick Menu opening slowly
body: <p>I have a jQuery onclick menu that works great in IE9+, Chrome and Firefox. However in IE8 it opens extremely slowly. It takes approximately 10 seconds for the menu to show, and none of the animations play, the menu just appears.</p>
  
  <p>The menu uses the latest version of jQuery (v1.10.2) and uses slide and animate only to open and close the different parts of the menu. I have tried googling various combinations of slow jQuery, slow loading menus and slow animations for IE8 and jQuery that I can, and I cannot even find anything remotely like the issue I'm having.</p>
  
  <p>You can see the problem by going to my <a href="http://mercury.demomycms.co.uk/" rel="nofollow noreferrer">website here</a>. Visit it with IE8 and you will notice the really slow speeds when you click on Test Category 1 or 2. </p>
  
  <p>Has anyone come across this kind of issue before? Does anyone know what causes it and the solution to get it working fine?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>I have noticed that it's not just affecting the menu, but also the carousel. If you look at the animations they are not sliding either, however in IE9 + they do slide. I'm not sure if the two are linked but it seems odd that it's both jQuery effects that are being affected.</p>
  
  <p><strong>Edit 2</strong></p>
  
  <p>After some more testing I have noticed that if the bottom of the menu falls over the Tabs below the carousel then the bit over the tabs shows straight away, if you however over the tabs. Same happens when you close the menu. Hover over the tabs and the bit of the menu drawn there goes away.</p>
  
  <p>I then watched and noticed that the menu shows and disappears when the carousel changes. It does seem to be a redraw issue, however the code I've been trying to make it paint upon completion doesn't seem to be working. This is the code I got from another <a href="https://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation#answer-4271996">answer here</a> (slightly modified to work with jQuery elements thanks to an answer below).</p>
  
  <pre><code>function FlushThis(id){
     var msie = 'Microsoft Internet Explorer';
     var tmp = 0;
     //var elementOnShow = document.getElementById(id);
     var elementOnShow = $(id);
     if(navigator.appName == msie) {
        tmp = elementOnShow.parentNode.offsetTop  +  'px';
     } else {
        tmp = elementOnShow.offsetTop;
     }
  }
  </code></pre>
  
  <p>I think it might be a case of either finding the correct function to redraw, or running that function on the correct element. I currently run that on the clicked element, which may not be the correct one. I have tried running that function on various elements, including the main UL, the element clicked, the element, opened and the element opened's parent. No luck with any of them.</p>
  
  <p><strong>JSFiddle:</strong> As requested <a href="http://jsfiddle.net/styphon/fjnXE/2/" rel="nofollow noreferrer">here is a JSFiddle</a> of the issue, however for me that won't even work in IE10. It works in Chrome fine.</p>
  
  <p><strong>EDIT 3:</strong></p>
  
  <p>I have stripped away everything except the bare essentials and put it in a test file. You can <a href="http://mercury.demomycms.co.uk/test.html" rel="nofollow noreferrer">veiw it on my website here</a>. I am getting no errors in IE console, nor in any other console. It is still giving the same issue, where the menu isn't drawn. However because there is no carousel behind it to force the redraw it never shows on this test site.</p>
  
  <p>All the redraw scripts I've tried so far have failed. How can I get this working?</p>