[jQuery] Weird Safari Issue
Ok, this is a bit of a complicated one to explain. I'm not sure if it
is a jQuery issue, CSS, or a Safari bug. We created a persistent cart
and a timer that next to it that counts down to 4pm to tell the user
if they buy a product by then it will be shipped the next day. When
there is nothing in the users shopping cart the timer displays, once
you add something to your cart you can click on a little clock to open
the timer or a shopping cart button to open the shopping cart. You can
see this in action here:
http://joggingstroller.com/
The structure I have this set up in is a absolutely positioned div
that is the container for both of these widgets. It is positioned from
the right of the header. This has a width of 645px. The two widgets
are floated right and both contain three floated left elements. For
the countdown this is the clock image the area in the middle with the
text and the end rounded image.
Only in safari do we have a problem and it doesn't happen all the
time. If you look in Safari the countdown is broken. Using the web
developer toolkit it appears compute the width exactly the size of the
clock image less then it should be. We are not setting the width at
all with javascript. We only grab the width of the middle area so that
when it closes we can then set the width back to the middle div to
open it again.
I don't want to post the javascript here because its a lot of stuff
and I don't know how to format it nicely. here is a link to it
http://joggingstroller.com/js/utility_javascript.jsp You have to
click view source to see it formatted correctly. The code starts
around line 513 and ends like 605.
The other thing that we use is a png fix. I'm not sure if Safari is
having an issue with the Document Ready or what. But you would think
if its a CSS issue it would happen all of the time. Whats even more
weird is that when building this on my local machine it works fine,
not until we pushed it out to the live site did we start noticing it,
and I know the JS and CSS are all the same as my local.
If anyone can help me out on this it would be greatly appreciated. I
have been researching for Safari float bugs, Computed Width bugs, JS
bugs and have tried everything I can think of but nothing works and
can't find anyone else with a similar problem. I have read about how
Safari 3 loads differently and was thinking that this could be the
issue also but have no idea on how to apply a fix or determine if that
is the issue. Especially because its hard to reproduce, I can't even
get it to have this bug on my local.