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

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

2 голосов
/ 28 мая 2011

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

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

Demo page screenshot

Загрузите источник ниже в 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 Ответ

1 голос
/ 29 мая 2011

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

body {
    width:100%;
}

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

body.safariFix
{
    width:100%;
}

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...