Is there a bug in Firefox concerning the accuracy of document.body.getBoundingClientRect().top?

Question

Is there a bug in Firefox concerning the accuracy of document.body.getBoundingClientRect().top?

When I access Firefox version 17.0.1 and request

document.body.getBoundingClientRect().top;

on a simple site with no CSS styling applied, it returns an incorrect value. Instead of the expected 8, which is the default for the browser, it shows 21.4. However, the .left offset is accurate.

In contrast, Chrome displays the correct offset values, giving me 8 for both top and left.

I have included a screenshot to illustrate why the top value should not be 22.4.

Below is the HTML code:

<html><head>
<title>Index</title>
<style type="text/css"></style></head>
<body>
    <div>
        <h1>Index</h1>
        <p>This is the index. The site contains in total 4 sites without
            any Javascript. They are linked using href links.</p>
        <p>The site looks like this:</p>
        <ul>
            <li>Index ->; a</li>
            <li>Index ->; b</li>
            <li>b ->; c</li>
            <li>c ->; b</li>
            <li>c ->; Index</li>
        </ul>
    </div>
    <a href="a.html">Go to A</a>
    <a href="b.html">Go to B</a>
</body></html>

javascript html css firefox

Answer 1

Answer №1

If you try setting a yellow background for your <html> and a green background for your <body>, you can observe how the rendering looks. It's likely that the green rectangle is positioned about 22px from the top of the viewport.

This occurs because the 8px top margin of the body collapses with the 22+px top margin of your <h1> since those margins are adjacent to each other. You can refer to http://www.w3.org/TR/CSS21/box.html#collapsing-margins for more information.

In standards mode, Chrome displays the same behavior. However, in quirks mode (as shown in the HTML snippet above), it behaves strangely where the <h1> still shows a 21px top margin that does not collapse with the <body>. Yet, adding a top margin to the <div> will cause it to collapse with the body. That's quirks mode for you.

Answer 2

If you try setting a yellow background for your <html> and a green background for your <body>, you can observe how the rendering looks. It's likely that the green rectangle is positioned about 22px from the top of the viewport.

This occurs because the 8px top margin of the body collapses with the 22+px top margin of your <h1> since those margins are adjacent to each other. You can refer to http://www.w3.org/TR/CSS21/box.html#collapsing-margins for more information.

In standards mode, Chrome displays the same behavior. However, in quirks mode (as shown in the HTML snippet above), it behaves strangely where the <h1> still shows a 21px top margin that does not collapse with the <body>. Yet, adding a top margin to the <div> will cause it to collapse with the body. That's quirks mode for you.

Answer 3

Answer №2

My testing involved Firefox 18 and the provided code snippet, resulting in an expected value of 8. I removed all formatting for clarity, but the outcome remained consistent at 8 with or without it.

<html>
<head>
<title>Index</title>
<script>
    window.onload = function () {
        document.getElementById("getBoundingClientRectTop").innerHTML = document.body.getBoundingClientRect().top;
    }
</script>
</head>
<body>
    <span id="getBoundingClientRectTop">???</span>
</body>
</html>

Answer 4

My testing involved Firefox 18 and the provided code snippet, resulting in an expected value of 8. I removed all formatting for clarity, but the outcome remained consistent at 8 with or without it.

<html>
<head>
<title>Index</title>
<script>
    window.onload = function () {
        document.getElementById("getBoundingClientRectTop").innerHTML = document.body.getBoundingClientRect().top;
    }
</script>
</head>
<body>
    <span id="getBoundingClientRectTop">???</span>
</body>
</html>

Is there a bug in Firefox concerning the accuracy of document.body.getBoundingClientRect().top?

Answer №1

Answer №2

Similar questions

Steps to convert a phone number into JSON format

Utilize Angular to inject an input from a component directly into the header of my application

Does the Array Splice method always remove an item from the end?

Retrieve targeted information from MySql using jQuery AJAX Success

Expanding divisions vertically without the constraints of fixed heights

What could be causing my button to not capture the value of this input text field?

How to properly format an HTML input box for numeric entry and ensure correct formatting of the minus sign

Executing a function after a subscriber has finished in Angular 8+

Numerous SVGs sharing identical IDs

Controller receiving empty object array from FormData

Encountering issues with connecting to the MongoDB server through Node.js

Clearly define where each navigation bar item should be displayed within your Django application using Bootstrap

Error: Unable to access property 'fetch' of null (discord.js)

Getting a specific index from an array using the Angular ng-repeat Directive: A step-by-step guide

Having trouble styling my Aside element correctly

What's the best way to position menu items vertically in a navbar?

JavaScript (Create a button that toggles the visibility of an element)

React - The select component has received an invalid value of `undefined` that is out of range

Sending auth0 token as a parameter in $http.get request in Angular

Various SVG paths make up segments