3

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.

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.

You can see the problem by going to my website here. Visit it with IE8 and you will notice the really slow speeds when you click on Test Category 1 or 2.

Has anyone come across this kind of issue before? Does anyone know what causes it and the solution to get it working fine?

Edit

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.

Edit 2

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.

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 answer here (slightly modified to work with jQuery elements thanks to an answer below).

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;
   }
}

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.

JSFiddle: As requested here is a JSFiddle of the issue, however for me that won't even work in IE10. It works in Chrome fine.

EDIT 3:

I have stripped away everything except the bare essentials and put it in a test file. You can veiw it on my website here. 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.

All the redraw scripts I've tried so far have failed. How can I get this working?

Community
  • 1
  • 1
Styphon
  • 10,304
  • 9
  • 52
  • 86
  • Clicking on the Test Category 1 and 2 menus is not slow for me when using IE8 v8.0.6001.18702 (the only version I have -- which I'm using via a VM from http://modern.ie). The carousel animations don't work, however; there is no sliding. – dlongley Jul 22 '13 at 18:27
  • I'm surprised the carousel didn't work. I'm not sure why I didn't think of this before but I'll try removing the carousel n see if that makes any difference. I suspect without the carousel it will work smoothly. However I do need to find a way to make it work **with** the carousel. – Styphon Jul 22 '13 at 19:44
  • I'm still seeing this error: SCRIPT5007: Unable to get property 'offsetTop' of undefined or null reference jquery.fluid-menu.js, line 28 character 7 Are you waiting for $(document).ready() to run that function? Definitely try removing everything from the page but the menu, and narrow it down from there. I would remove all animations except the necessary ones, as well, and put it back together piece by piece until you nail down exactly what's causing that. – Sean Kendle Jul 22 '13 at 21:08
  • This is run on `$(document).ready()`, you can see the call in js/main.js, line 3. – Styphon Jul 23 '13 at 13:30
  • An alternative to solving this problem is to just use bootstrap instead. It might save you a lot of work here and in the future. Just a suggestion though. :) – dlongley Jul 23 '13 at 16:07
  • I am using bootstrap, however the bootstrap menu doesn't support such a complex menu. We need something more suitable for eCommerce. – Styphon Jul 23 '13 at 19:42
  • 1
    First of all, your carousel animation is done with css. That's why it doesnt work with ie 8 (doesnt support css transition). Your offsetTop doesn't work because jQuery object doesn't have an offsetTop property. It has offset().top that u can use instead. As for the speed, its hard to debug when you dont know what could be the cause and cant edit the scripts to try and narrow down. Try making a fiddle with only the minimal setup needed for your menu. – joram Jul 24 '13 at 02:49
  • I've created a fiddle and edited my answer to include a link. – Styphon Jul 24 '13 at 12:51
  • Updated answer, it's definitely a redraw issue. – Styphon Jul 24 '13 at 13:48

4 Answers4

1

I don't know if this is related or not, but I noticed that there's an error that occurs each time you click on those menus.

Uncaught TypeError: Cannot read property 'offsetTop' of null

It occurs in the "FlushThis" function (from jquery.fluid-menu.js) which is apparently some kind of hack to support IE. If you look at the code, it attempts to read the "offsetTop" property of an element and then simply throws away the result. Perhaps this is a trick on IE to make it run some native code that will maybe repaint/relayout the page once the menu has been opened? It looks like a jqueryified element ($this) is being passed to that function instead of the ID of the element, which I presume is causing the look up to fail. You may want to try to get that code executing properly and see if it resolves your problem.

dlongley
  • 2,078
  • 14
  • 17
1

Too many script issues to look into the real problem.

SCRIPT1028: Expected identifier, string or number 
jquery.fluid-menu.js, line 15 character 3
SCRIPT438: Object doesn't support property or method 'fluidMenu' 
main.js, line 3 character 2

The script issues arise when the menu is clicked.

Chrome, and Mozilla tolerate errors to the maximum without letting user know that there is a script error. But IE is not so kind hearted. IE 8 & - are natively slow in running scripts many animation effects wont work in them since the properties like opacity are ignored by it, unless you have fall back options.

Aneesh Mohan
  • 1,077
  • 8
  • 17
  • What program are you using to see that? I've used Firebug in both Chrome and Firefox and get no errors when I open it. – Styphon Jul 23 '13 at 13:22
  • Never mind, I have found that error in IE console. I have fixed in now though. The problem was using `parentNode` on a jQuery element, changed it to `parent()` and it has worked. Still hasn't solved my issue though. – Styphon Jul 23 '13 at 13:36
0

Maybe the slideshow overlays the menu while animation is playing. I could just set my ie10 to ie8 mode and saw the the layers are not in best order for display.

Did you try to set the z-index on the menu? Perhaps you try hide the the carousel temporary and check if the menu opens well then.

Daniel Nachtrub
  • 121
  • 4
  • I have set the z-index's now and unfortunately it didn't help. I have noticed another thing though, it's not just the menu being slowed. I'm just going to update my initial question with extra info. – Styphon Jul 17 '13 at 15:35
  • concerning the menu it seems to be animated. you can see a tiny slice beetwen menu and carousel. – Daniel Nachtrub Jul 17 '13 at 16:54
  • it seems that the width gets animated while the height is not animated. perhaps jquery can't determine the desired height of the menu and therefore doesn't animate correctly. – Daniel Nachtrub Jul 17 '13 at 16:57
  • The height is set in CSS. It shouldn't need to determine the height as far as I can tell, unless you can see something I've missed? – Styphon Jul 17 '13 at 20:28
  • i tested some other Options on the page and noticed that it may be also related to some issue when repainting the page: The menu doesn't Show up until some interaction occurs (a click Event on the page or the Location where the menu would be). i'm not sure if this is related to the mode enforcement in my ie10 but may be a good Point to start. perhaps you try to enforce a repaint to the menu after the Animation has completed (quickly hide and Show the menu or apply some style changes which should enforce a repaint). – Daniel Nachtrub Jul 17 '13 at 20:39
  • I have tried repainting using this answer - http://stackoverflow.com/questions/1397478/forcing-a-dom-refresh-in-internet-explorer-after-javascript-dom-manipulation#answer-4271996. But no joy unfortunately. – Styphon Jul 18 '13 at 15:56
0

Is there a specific reason you're using "document.getElementById" rather than a JQuery selector here? It's not finding document.getElementById(id) and it's throwing an error on this line: tmp = elementOnShow.parentNode.offsetTop + 'px';:

function FlushThis(id){
    var msie = 'Microsoft Internet Explorer';
    var tmp = 0;
    var elementOnShow = document.getElementById(id);
    if(navigator.appName == msie) {
        tmp = elementOnShow.parentNode.offsetTop  +  'px';
    } else {
        tmp = elementOnShow.offsetTop;
    }
}

Maybe change var elementOnShow = document.getElementById(id); to var elementOnShow = $("#" + id);?

Also, why are you adding 'px' to the end for IE? Try commenting that out so it just says tmp = elementOnShow.offsetTop and see if that makes a difference.

The error is probably just disabling most of the rest of the Javascript on that page.

One other thing I've found: sometimes "slideUp" and "slideDown" and other "built-in" animation methods seem to be buggy or crunchy in IE (like, they animate most of the way, then they stop for a second near the end of the animation, and suddenly blink to the end).

I always use the JQuery animate() function for everything. It's a bit more of a pain to write, but you can specify outerHeight/outerWidth values that take padding into account and things like that. Try replacing your functions with animate() and see if that helps!

Sean Kendle
  • 3,538
  • 1
  • 27
  • 34
  • I used that code simply because I copied and pasted it in from the answer I linked in another comment. It was suggested I try repainting and that was the only function I could find that seemed to do it. However it didn't solve the issue, perhaps because of the problems you mentioned. I shall give that a try. – Styphon Jul 22 '13 at 15:00
  • Nope, no luck. It's stopped that error from happening now but with or without the ` + 'px'` commented out it still doesn't solve the issue in IE8. I have just noticed something though and will update my original question. – Styphon Jul 22 '13 at 15:06
  • Take another look at my edited response, here. (I steered you wrong on the id selector! My bad!) – Sean Kendle Jul 22 '13 at 21:15
  • No, you were right as it's a jQuery element being passed to the function, not an ID. – Styphon Jul 22 '13 at 23:45
  • Ok, did you notice my other edit about the slideUp/slideDown functions? Also, I'm still getting that error in IE on that page (twice)... or, I was yesterday, haven't checked it today. – Sean Kendle Jul 23 '13 at 14:08
  • Yea, I solved that error earlier today. I will give animate a try, thanks. – Styphon Jul 23 '13 at 14:20
  • I've changed the animations and still no joy - http://mercury.demomycms.co.uk/test2.html – Styphon Jul 24 '13 at 15:03
  • Awarded bounty, as although I didn't get a solution, you did give me the most help. I think I will be giving up on solving this and trying another approach. – Styphon Jul 26 '13 at 15:29