Menu looks broken until I refresh browser

Question

I tried to put together a CODEPEN HERE for you, but I'm afraid it will not be much help since I can't reproduce the problem there.

This is a very complex and large website. It is very difficult to provide you with just the code that applies to this, since there is so many scripts and stylesheets that are working together to make it work, but I am doing my best to provide you with what I can.

Basically, when the page loads, it loads fine, but when I click on a link in the menu to take me to that page, that page loads with a "broken" menu look. SEE PIC. As soon as I refresh the page or even resize it by one pixel, it resets to the way it should look. SEE PIC ALSO

Please, someone, have you come across something like this? enter code here And if you can't find a mistake by looking at the code, is there a way to refresh any given stylesheet or script? I can't force a page refresh because some things are supposed to process from the database on PageLoad.

I'm not holding my breath, but I certainly hope you guys can help.

Here is the pic with the problem. and the link to codepen is above

enter image description here

Not sure if you have seen this bug, but it makes me think of your case, especially since it seems to be a Chrome-specific issue: https://code.google.com/p/chromium/issues/detail?id=246875 — Clark, Mar 13 '15 at 00:36
Thank you Clark. That thread does look promising. I will look into this in the morning. If I can't find the fix there I will put a bounty on this question to get some motivation — LOTUSMS, Mar 13 '15 at 03:57

score 0 · Answer 1 · answered Mar 12 '15 at 02:59

0

Try to add something like ?v=1232 to your style

href="css/init.css?v=1232"

answered Mar 12 '15 at 02:59

Gildas.Tambo

22,173
7
50
78

Im not quite familiar with this. Is this what I need to add to head? What does this do? – LOTUSMS Mar 12 '15 at 03:16
@LOTUSMS Yes in you style tag child of head element. – Gildas.Tambo Mar 12 '15 at 03:19
I added it to the main stylesheet as follows Didn't fix it. Did I do it right? – LOTUSMS Mar 12 '15 at 03:24
Did that first. Didn't work. Also, it seems to be only in Chrome (that I've noticed so far) – LOTUSMS Mar 12 '15 at 03:31

score 0 · Accepted Answer · answered Mar 13 '15 at 14:42

The problem has been resolved. Apparently, the accessibilitymegamenu.js adds the attribute aria-haspopup="true" programmatically which it makes it bug out if you add it manually when coding for JAWS and/or any other non-sighted users accessibility website.

If you're using any accessibility script and your hyperlink is coded as follows:

<a id="myID" href="#" class="myClass" aria-haspopup="true">My Link</a>

change it to:

<a id="myID" href="#" class="myClass">My Link</a>

Your output (according to the accessibility script) will still be:

<a id="MyID" aria-label="My Label" href="javascript:void(0)" aria-haspopup="true" aria-controls="accessible-megamenu-1426257105716-6" aria-expanded="true" class="MyClass">My Link</a>

Hopefully this helps others and saves them the two weeks of debugging it cost us.

Happy Coding!

Menu looks broken until I refresh browser

2 Answers2