Safari bug -- offsetWidth miscalculation when position absolute is involved
Has anyone else noticed an issue when performing calculation [element].offsetWidth in JavaScript? I get two different values; one from Safari and another (the correct value) from the other modern browsers (FF, IE)?
Absolute positioning is involved somehow, but I've yet to figure out just how. I think it may be when you are absolute positioning elements within a relatively positioned parent, or visa versa. However it happens, the result is that my elements render overlapped. Here is some example code:
<pre>
<style type="text/css">
div.stepcarousel {
position: relative;
overflow: scroll;
height: 1.5em;
margin-left: -1em;
}
div.stepcarousel .belt {
position: absolute;
left: 0;
top: 0;
}
div.stepcarousel .panel {
float: left;
overflow: hidden;
width: 12em;
text-align: center;
margin: 0 .5em;
position: absolute;
}
</style>
</pre>
Absolute positioning is involved somehow, but I've yet to figure out just how. I think it may be when you are absolute positioning elements within a relatively positioned parent, or visa versa. However it happens, the result is that my elements render overlapped. Here is some example code:
<pre>
<style type="text/css">
div.stepcarousel {
position: relative;
overflow: scroll;
height: 1.5em;
margin-left: -1em;
}
div.stepcarousel .belt {
position: absolute;
left: 0;
top: 0;
}
div.stepcarousel .panel {
float: left;
overflow: hidden;
width: 12em;
text-align: center;
margin: 0 .5em;
position: absolute;
}
</style>
</pre>
Safari 3.1.2, Windows XP Pro, Also happens in OS 10.5.4 stock Safari