Dimensions + $(document).ready() + Safari 3.1 == misery (Brandon?)
Hi guys,
while building a plugin, I came upon a few nasty bugs in Safari 3.1.
The elements which were used were the following:
<style>
#contentLayer {
position: absolute;
margin: auto;
overflow: hidden;
left: 0;
top: 114px;
bottom: 41px;
width: 100%;
text-align: center;
}
.content{
width: 888px;
margin: auto;
text-align: left;
}
</style>
<div id="contentLayer"><div><div class="content">
<!-- content stuff -->
</div></div></div>
Now on $(document).ready I would run a script which makes use of
jquery 1.2.3 and dimensions 1.2 to calculate the width and position of
the .content, which would completely fail. First of all, the .width()
function would give a completely wrong result and the position().left
would be 0, instead of the auto-margin it had.
The width problem was solved by replacing:
$(initNav);
wtih:
setTimeout(function() { $(initNav); }, 0);
And the position left problem was solved by changing dimension 1.2
plugin on line 90, replacing:
offset.top -= num(elem, 'marginTop');
offset.left -= num(elem, 'marginLeft');
with:
if (!$.browser.safari) {
offset.top -= num(elem, 'marginTop');
offset.left -= num(elem, 'marginLeft');
}
Now I'm not sure if this will cause problems in cases not described
here and really, writing this post takes more time than I have
already. Perhaps it could be used and test in the test suite if
everything still works?
The problem here was that offset.left was exactly the same as
num(elem, 'marginLeft'), which would result in 0.
Brandon: I hope you could check dimensions if something like this
would help.
Jquery team: any clue what's up with the document.ready?
Cheers,
Yereth