$(window).scrollTop in IE 8 Browser is causing issues with links, how to fix?

Question

Ok, I've narrowed it down to a problem with the $(window).scroll somehow, seems to be within the code on the pages here:

$(window).scroll(function() {
    var $width = $(window).scrollTop() > $("#header_image").outerHeight() ? .92 * $(window).width() : .92 * $(".content").width();

    sMenu.toggleClass('sticky', $(window).scrollTop() > $("#header_image").outerHeight());
    $(".menu").children("li").resizelis($width);
});

How to fix this?

If you go here: http://opportunityfinance.net/Test/conference/index.html (disregard how the slider looks on that page, that's another story altogether). You can browse any of the pages in the Menu to see the same problem in all pages of the Microsite.

You will see that each time you go to any of the menu items and you hover over any of the links, the page has a glitch itself and causes it to shake a bit. How can this be fixed? The pages do not experience this issue on the actual site in IE 8 browsers: http://opportunityfinance.net/conference-2013/index.html

Only thing that was changed was adding of a jQuery.fn.extend code and a change to the overall font-size, here:

jQuery.fn.extend({
    resizelis: function(xWidth) {
      var mButtons = this.length;
      var buttonSize = (xWidth / mButtons);
        return $(this).each(function() {
            $(this).css("width", buttonSize + "px");
            $(this).children("a").css("width", buttonSize + "px");
        });
    }
});

$(window).bind("resize", function(){
    var containerSize  = $(".content").width(),
        bodyFontSize = $(".content").css("font-size");
        textPercentage = parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2)) / 1000,
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / parseInt(bodyFontSize.substring(0, bodyFontSize.length - 2));
        if (!isMobile)
            textEms = (textEms - 0.2);
    $('.content').css('fontSize', textEms+'em');

    var wScreen = isMobile ? $(window).width() : $("div.content").width();              
    var per = .92 * wScreen;
    if (!isMobile)
    {
        if ($(window).scrollTop() > $("#header_image").outerHeight())
        per = .92 * $(window).width();

        sMenu.toggleClass('sticky', $(window).scrollTop() > $("#header_image").outerHeight());
        $(".menu").children("li").resizelis(per);
    }

    // more code folows....
}).trigger("resize");

I basically just changed everything to scale to $(".content") instead of $(window) in all pages. Works perfectly fine in all browsers cept IE 8 and below now. But the strange this is that, before I did this, the links were fine as you can see on the actual conference site here: http://opportunityfinance.net/conference-2013/index.html

What could be causing this issue? I don't have any hover jQuery effects on links, seems like this is a problem with the CSS maybe?

If it wasn't for the 40% of all IE users who come to the site, running IE 8, I really wouldn't care, but I have no choice to support it! arggg! And IE is the most popular browser used on this site too... arggg!

Answer 1

I believe I found the solution to my problem as strange as it may seem. Because the font-size is being set to: 0.8em (overall body font-size), and the type of font is GOTHIC. The answer to this is located here: IE8 font-size toggles on :hover - Japanese lang only

UNBELIEVABLE!