Странное поведение JQuery в случае перегрузки страницы

Question

У меня есть «волшебная линия» в навигации моего сайта (это слайды под нависшим элементом меню и оставаться там, если я уже на этом URL-адресе).

$(function() { 
    var $el, leftPos, newWidth, $mainNav = $("#menu"); 

    $mainNav.append("<li id='magic-line'></li>"); // line with position 
                // absolute 
    var $magicLine = $("#magic-line"); 
    // initialization 
    if ($('.selected')[0].id == 'logo') { // we're on the main page 
     $magicLine.width(1) // just hide 
     .css({ 
      "left" : 100 
     }).data("origLeft", 100).data("origWidth", 1); 
    } else { // we're on the not-main page 
     off = parseInt($('#menu > .selected').css('padding-left').slice(0, -2)); 
     leftPos = $("#menu > .selected").position().left + off; 
     $magicLine.width($(".selected").width()) // stay under the menu 
                // element 
     .css("left", leftPos).data("origLeft", $magicLine.position().left) 
       .data("origWidth", $magicLine.width()) 
    } 

    $("#menu > .nav-item").hover(function() { // go under the menu element 
     $el = $(this); 
     newWidth = $el.width(); 
     off = parseInt($el.css('padding-left').slice(0, -2)); 
     leftPos = $el.position().left + off; 
     $magicLine.stop().animate({ 
      left : leftPos, 
      width : newWidth 
     }, 200); 
    }, function() { 
     $magicLine.stop().animate({ 
      left : $magicLine.data("origLeft"), 
      width : $magicLine.data("origWidth") 
     }, 200); 
    }); 
}); 

И я обнаружил какое-то странное поведение. Это немного отличается в каждом браузере, но тренд тот же: когда я нажимаю элемент меню - он переходит в правильное положение (скажем, влево 260 пикселей), я могу щелкнуть снова и снова, но он все еще там. Но когда я нажимаю F5 (или просто набираю url), он появляется в несколько иной позиции (слева 256 пикселей). Таким образом, я нажимаю на один и тот же элемент, и он снова находится в правильном положении. И если я не остановлюсь, это может кардинально измениться и после того, как F5 появится в правильном положении.

В чем причина такого поведения? Это как-то экономит состояние? В чем разница между F5 и просто нажатием? Единственное, что я вижу в данный момент, это мой веб-сервер разработки django, который полностью синхронно, медленно и не кэшируется, но я не могу проверить его на рабочем сервере.

Answer 1

Итак, проблема заключалась в пользовательских шрифтах, используемых в меню (@ font-face) и соответствующей ширине. Если шрифт изменен на один из безопасного списка (Arial, Verdana), он отображается и ведет себя так, как я ожидаю, но когда пользовательский шрифт используется, он обрушивается. Кстати, консоль JS-браузера дала мне это предупреждение: «Ресурс интерпретируется как« Шрифт », но передается с типом MIME-типа/x-font-otf», но я не уверен, что это связано с проблемой.

И мое решение просто объявляет ширину для каждого элемента, поэтому браузер может отображать его правильно с самого начала.