Блог

Главная - Вопросы по программированию - Safari вставляет нечетный объект в DOM при уменьшении окна, которое искажает результаты position() jQuery

Safari вставляет нечетный объект в DOM при уменьшении окна, которое искажает результаты position() jQuery

#javascript #jquery #html #browser #safari

#javascript #jquery #HTML #браузер #safari

Вопрос:

при разработке более сложного скрипта у меня возникла довольно странная проблема с Safari. Я использую 5.0.5 Win, если это имеет значение. Я полагаюсь на position().left от jQuery, когда окно браузера изменяется, чтобы переместить элемент position:fixed. В зависимости от того, увеличивается или сжимается окно, я получаю разные результаты для position ().left, хотя из-за того, что какой-то нечетный элемент отображается Safari в этот момент (и только в этот самый момент).

Я написал демонстрационную страницу, которая показывает проблему.

Скриншот демонстрационной страницы

Загрузите приведенный ниже исходный код в Safari в оконном режиме и немного уменьшите окно. Предупреждение приведет к зависанию, так что вы увидите странный элемент, который меня беспокоит, в верхнем левом углу документа.

Что это такое, откуда это берется и как мне обойти это?

Спасибо.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <style type="text/css">
    #test{
        width:500px;
        height:2000px;
        margin: 0 auto;
    }
    </style>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
    <script type="text/javascript">
    // <![CDATA[
        function resizeWindow( e ) {
            alert($('#test2').position().left);
        };
        $(window).bind("resize", resizeWindow);
    // ]]>
    </script>
  </head>
  <body>
  <div id="test"><div id="test2">Something
  </div></div>
</body></html>

Ответ №1:

Я понял, что нужно сделать, чтобы это прекратить: для этого нужно явно установить ширину тела на 100% с помощью css. Что такое нечетный элемент и почему он вводится без этого в первую очередь, я до сих пор понятия не имею.

 body {
    width:100%;
}

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

 body.safariFix
{
    width:100%;
}

и присваиваю это с помощью JS перед получением нужных мне значений, а затем снова удаляю его.

 if ($.browser.webkit) $('body').addClass('safariFix');
    ...
if ($.browser.webkit) $('body').removeClass('safariFix');

Часть обнаружения браузера была добавлена, потому что это вызвало бесконечный цикл в MSIE. В конце концов, это находится внутри обработчика события изменения размера, и удаление / добавление класса позволяет MSIE запускать событие изменения размера.
Я не использую функцию обнаружения, потому что я не знаю, какую функцию обнаружить, чтобы определить это. Обнаружение нечетного отображаемого объекта было бы неплохо, но я не стал углубляться в это дальше.