Проблема с jQuery с Chrome

Когда я предупреждаю значение .position().left, он возвращает 0 на Chrome. С другими браузерами он возвращает фактическое число. Почему это происходит?

Ответ 1

Браузеры на основе Webkit (например, Chrome и Safari) могут получить доступ к изображениям width и height только после полной загрузки изображений. Другие браузеры могут получить доступ к этой информации, как только загрузится DOM (им не нужно полностью загружать изображения, чтобы знать их размер).

Итак, если у вас есть изображения на вашей странице, с браузерами на основе Webkit вы должны получить доступ к offset информации после возникновения события $(window).load, а не после события $(document).ready.

Ответ 2

Прочитав комментарии http://api.jquery.com/position/, есть несколько способов исправить это. Я нашел работу

Ajaho [Модератор]: Эта функция плагина устраняет проблемы с неправильным расположением в Chrome

jQuery.fn.aPosition = function() {
    thisLeft = this.offset().left;
    thisTop = this.offset().top;
    thisParent = this.parent();

    parentLeft = thisParent.offset().left;
    parentTop = thisParent.offset().top;

    return {
        left: thisLeft-parentLeft,
        top: thisTop-parentTop
    };
};

Ответ 3

Webkit иногда может быть слишком быстрым, но часто он обрабатывается в jQuery. Вы можете отлаживать, используя что-то вроде:

var v, elem = $('.myElement');
window.setTimeout(function() {
    v = elem.position().left;
    console.log(v);
    if (v) {
        return false;
    }
    window.setTimeout(arguments.callee, 1);
}, 1);

Это будет проверять, доступна ли и когда позиция. Если вы регистрируете "0" в бесконечности, position().left "никогда" недоступен, и вам нужно отлаживать в другом месте.

Ответ 4

У меня была та же проблема.

Я исправил его, используя: .offset().left. Но имейте в виду, что это не одно и то же: http://api.jquery.com/offset/

.position().left работал в Chrome в некоторых тестах, которые я использовал, используя аналогичный подход, чем Дэвид (значение имелось с тех пор, как первая попытка).

В моем "реальном" приложении не удалось даже чтение позиции на событии клика (что может исключить любую загрузку скорость). Некоторые комментарии (на другом форуме) говорят, что это может быть связано к использованию display:inline-block. Однако я не мог воспроизведите проблему, используя inline-block. Поэтому он может быть другим.

Ответ 5

Возможно, немного устаревший, так как вопросы датируются 2010 годом, но это сделало трюк для моих проблем с позиционированием в Chrome:

$(window).load(function(){
  p = $('element').offset();
  // et cetera
});

Ответ 6

используйте jQuery (window).load() вместо jQuery (document).ready()

Ответ 7

Для меня это сработало, поместив код javascript в документ, готовый непосредственно перед закрытием тега body

Таким образом, он выполняет код после того, как он загрузил все

    <body>
        <div>content</div>
        <div class='footer'>footer</div>
        .
        .
        .

        <script type='text/javascript>
            $(document).ready(function(){
              var footer_position = $(".footer").offset().top;
              console.log(footer_position);
            });
        </script>
     </body>

Ответ 8

Я использую эту функцию для ее исправления.

function getElementPosition(id) {
          var offsetTrail = document.getElementById(id);
          var offsetBottom = 0;
          var offsetTop = 0;
          while (offsetTrail) {
              offsetBottom += offsetTrail.offsetBottom;
              offsetTop += offsetTrail.offsetTop;
              offsetTrail = offsetTrail.offsetParent;
          }

          return {
              bottom: offsetBottom,
              toppos: offsetTop
          };
      }