Ticket #2082 (closed bug: fixed)
Offset function returns wrong value with IE7/position fixed
| Reported by: | dprunier | Owned by: | brandon |
|---|---|---|---|
| Priority: | major | Milestone: | 1.2.2 |
| Component: | offset | Version: | 1.2.1 |
| Keywords: | Cc: | ||
| Blocking: | Blocked by: |
Description
When querying the offset top of a fixed div in IE7, the scroll is mistakenly counted in the returned value.
Example:
<?xml version="1.0" encoding="UTF-8" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#fixed').text($('#fixed').offset().top);
}, 100);
});
</script>
</head>
<body>
<div id="fixed" style="position: fixed;
top: 0px; left: 0px;
width: 100px; height: 100px;
background-color: fuchsia;">
</div>
<div id="big" style="height: 5000px">
</div>
</body>
</html>
Change History
comment:2 Changed 5 years ago by dprunier
- Status changed from closed to reopened
- Resolution fixed deleted
The test sample in the description still doesn't work. This is actually broken in both IE7 and FF now (1.2.2, r4454).
comment:3 Changed 5 years ago by brandon
- Status changed from reopened to closed
- Resolution set to fixed
This is fixed. Please see the modified test case that places a div at the elements location here: http://brandonaaron.net/jquery/tickets/2082/test.html
If the scroll offset is not included then the marker div will not be placed correctly.
This was fixed for all supported browsers in 1.2.2. There is also now an offset test suite that can be found in test/offset.html
comment:4 Changed 5 years ago by manolofdez85
- Status changed from closed to reopened
- Resolution fixed deleted
Is this bug really fixed??
I tried the following and still does not work
<html>
<head>
<title>Offset</title>
<style>
html, body{
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript" src="js/jquery.js">void(0);</script>
<script type="text/javascript">
$(document).ready(function(){
$("img").click(function(){
var offset = $(this).offset();
alert("Wrong: " + offset.left + ", " + offset.top)
alert("Write: " + $(this).get(0).offsetLeft + ", " + $(this).get(0).offsetTop)
});
});
</script>
</head>
<body>
<img src="http://images.google.com/intl/en_ALL/images/images_hp.gif" />
</body>
</html>
Thanks in advance!!
comment:5 Changed 4 years ago by dmethvin
- Owner set to brandon
- Status changed from reopened to new
Confirmed that the test case returns "Wrong: 2,2" "Right: 0, 0" for the test case above.
comment:8 Changed 4 years ago by brandon
- Status changed from new to closed
- Resolution set to fixed
This is fixed and has been fixed for a very long time now.
You can't just compare offsetLeft and offsetTop to the _actual_ offset of an element. The offset of an element is its position from the top left of the document. Please see the following test case to hopefully better understand. http://jquery.com/test/data/offset/fixed.html
Click either other two white boxes and a marker will be placed on top of the element you clicked. This is the true offset ... not its offsetLeft and offsetTop which shouldn't even be trusted for relative offset.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
This is fixed in the latest SVN.