Как получить правильное значение вершины смещения из WebKit (Chrome / Safari) с JQuery? Ошибка Webkit? - PullRequest
Новая
       18

Как получить правильное значение вершины смещения из WebKit (Chrome / Safari) с JQuery? Ошибка Webkit?

1 голос
/ 14 ноября 2011

Я работаю над кодом, который программно позиционирует div, чтобы создать видимость прокрутки. Все отлично работает при использовании Firefox и Internet Explorer (хотите верьте, хотите нет). Тем не менее, я получаю фиктивные значения из браузеров webkit (Chrome / Safari). Похоже, что-то связано с тем, имеет ли элемент содержимое. Я рассчитываю положение пустого элемента привязки. Кажется, Webkit понимает это правильно только , когда элемент имеет видимое содержимое. Таким образом, я мог бы обойти это, имея некоторый контент в своем якоре. Тем не менее, это портит мой макет и ощущается как клудж. Кроме того, я хотел бы зарегистрировать ошибку, если это действительно то, с чем я имею дело. Ниже приведен пример документа для иллюстрации проблемы. Откройте его в разных браузерах, чтобы увидеть, что я имею в виду. Большое спасибо заранее! : -) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>What's Up with Webkit Anchor offset()?</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
    <script type="text/javascript">
        var offsetAlert = function(calledBy){
            var anchor = jQuery("a#anchor");
            var span = jQuery("span#test");
            var subheading = jQuery("span#targetSubHeading");
            if (anchor.length == 1 && span.length == 1 && subheading.length == 1)
            {
                alert("offsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nspan.offset().top=["+span.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
            }

        };

        $(document).ready(function (){offsetAlert("jQuery.ready");});
    </script>
</head>
<body style="background-color:#c6cbd1; margin:0px; padding:0px; border:none;" onload="javascript:offsetAlert('body.onload');">
    <div>
        <a name="top"></a><h2>Heading</h2>
        This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >This is the phenomemaly interesting text.
        <br ><br >Internal Links: <a href="#a1">Sub-heading 1</a>, <a href="#a2">Sub-heading 2</a>, <a href="#a3">Sub-heading 3</a>, <a href="#anchor">Target Sub-heading</a>
        <br ><br ><b><a id="a1"></a>Sub-heading 1</b>
        <br >This is the phenomemaly interesting text. 
        <br><a href="#top">top</a>
        <br ><br ><a id="a2"></a><b>Sub-heading 2</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><b><a id="a3"></a>Sub-heading 3</b>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
        <br ><br ><span class="anchor" id="test"><a id="anchor"></a></span><span id="targetSubHeading" style="font-weight:bold;">Target Sub-heading</span>
        <br >This is the phenomemaly interesting text.
        <br><a href="#top">top</a>
    </div>
</body>
</html>

Хорошо, вот обновление. Спасибо Чарльзу за ответ ниже. Я обновил свой пример, чтобы он функционировал, чтобы проиллюстрировать и проблему, и обходной путь, который я нашел, основываясь на ответе Чарльза. Это, кажется, работает, но я все еще задаюсь вопросом, должен ли я сообщить об этой ошибке. 

var offsetAlert = function(calledBy){
    var anchor = jQuery("a#anchor");
    var subheading = jQuery("span#targetSubHeading");
    var displayCss = anchor.css("display");
    anchor.css("display", "block");
    var alteredOffset = anchor.offset();
    anchor.css("display", (displayCss ? displayCss : ""));
    if (anchor.length == 1 && subheading.length == 1)
    {
        alert("displayCss=["+displayCss+"]\nalteredOffset.top=["+alteredOffset.top+"]\noffsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
    }
};

Спасибо!

Вот, надеюсь, последнее обновление. Я проверил Webkit и не нашел эту ошибку. Поэтому я добавил новую ошибку и ссылку на этот вопрос. Надеюсь, это привлечет внимание и в конечном итоге будет исправлено. Вот ссылка: http://bugs.webkit.org/show_bug.cgi?id=72524

Кстати, у меня была краткая ссылка на существующую ошибку, но оказалось, что это для offsetHeight, а не offsetTop.

1 Ответ

1 голос
/ 14 ноября 2011

Из того, что я вижу, это влияет на любой встроенный элемент без содержимого.Изменение элемента span на любой элемент блока или добавление display: block;к тегу span дает мне те же значения, что и в IE.

...