Different Values for $('#foo').position().left in Firefox and Chrome

Reported by:	breck7@gmail.com	Owned by:	breck7@gmail.com
Priority:	low	Milestone:	None
Component:	offset	Version:	1.8.3
Keywords:		Cc:
Blocked by:		Blocking:

Description

<!doctype>
<html>
  <head>
    <title>Test</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function (){
      console.log($('#container').position().left)
      $(window).on('resize', function () {
        console.log($('#container').position().left)
      })
    })
    </script>
    <style>
    #main {
      position: relative;
      width: 100%;
    }
    #container {
      height: 100%;
      position: relative;
      margin: auto;
      width: 960px;
    }
    </style>
  </head>
  <body>
  <div id="main">
    <div id="container">hello</div>
  </div>
  </body>
</html>

Attachments (0)

Change History (6)

Changed February 15, 2013 07:09AM UTC by breck7@gmail.com comment:1

On Chrome $('#container').position().left ignores the margin on the container.

In firefox $('#container').position().left takes into account the margin.

Changed February 24, 2013 09:58PM UTC by mikesherov comment:2

component:	unfiled → offset
owner:	→ mikesherov
priority:	undecided → low
status:	new → assigned

Changed February 24, 2013 10:10PM UTC by mikesherov comment:3

description:	<!doctype> \ <html> \ <head> \ <title>Test</title> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function (){ \ console.log($('#container').position().left) \ $(window).on('resize', function () { \ console.log($('#container').position().left) \ }) \ }) \ </script> \ <style> \ #main { \ position: relative; \ width: 100%; \ } \ #container { \ height: 100%; \ position: relative; \ margin: auto; \ width: 960px; \ } \ </style> \ </head> \ <body> \ <div id="main"> \ <div id="container">hello</div> \ </div> \ </body> \ </html> → {{{ \ <!doctype> \ <html> \ <head> \ <title>Test</title> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function (){ \ console.log($('#container').position().left) \ $(window).on('resize', function () { \ console.log($('#container').position().left) \ }) \ }) \ </script> \ <style> \ #main { \ position: relative; \ width: 100%; \ } \ #container { \ height: 100%; \ position: relative; \ margin: auto; \ width: 960px; \ } \ </style> \ </head> \ <body> \ <div id="main"> \ <div id="container">hello</div> \ </div> \ </body> \ </html> \ }}}

description:

<!doctype> \ <html> \ <head> \ <title>Test</title> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function (){ \ console.log($('#container').position().left) \ $(window).on('resize', function () { \ console.log($('#container').position().left) \ }) \ }) \ </script> \ <style> \ #main { \ position: relative; \ width: 100%; \ } \ #container { \ height: 100%; \ position: relative; \ margin: auto; \ width: 960px; \ } \ </style> \ </head> \ <body> \ <div id="main"> \ <div id="container">hello</div> \ </div> \ </body> \ </html> → {{{ \ <!doctype> \ <html> \ <head> \ <title>Test</title> \ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> \ <script type="text/javascript"> \ $(document).ready(function (){ \ console.log($('#container').position().left) \ $(window).on('resize', function () { \ console.log($('#container').position().left) \ }) \ }) \ </script> \ <style> \ #main { \ position: relative; \ width: 100%; \ } \ #container { \ height: 100%; \ position: relative; \ margin: auto; \ width: 960px; \ } \ </style> \ </head> \ <body> \ <div id="main"> \ <div id="container">hello</div> \ </div> \ </body> \ </html> \ }}}

Changed February 24, 2013 10:14PM UTC by mikesherov comment:4

owner:	mikesherov → breck7@gmail.com
status:	assigned → pending

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!

Additionally, be sure to test against the "jQuery (edge)" version to ensure the issue still exists—you may need to change this to a specific version depending on the test case.

To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/ Open the link and click to "Fork" (in the top menu) to begin.

I even tried to use the test case you provided in the comments and couldn't reproduce the bug as described:

http://jsbin.com/amatud/3/edit

Changed February 24, 2013 10:17PM UTC by mikesherov comment:5

Also, noticed you were using an invalid doctype, but even changing that to a proper one doesn't reproduce the issue.

Changed March 11, 2013 08:39AM UTC by trac-o-bot comment:6

resolution:	→ invalid
status:	pending → closed

Because we get so many tickets, we often need to return them to the initial reporter for more information. If that person does not reply within 14 days, the ticket will automatically be closed, and that has happened in this case. If you still are interested in pursuing this issue, feel free to add a comment with the requested information and we will be happy to reopen the ticket if it is still valid. Thanks!

Side navigation

#13457 closed bug (invalid)