Strange Safari rendering bug, please help!

We do work for GSPRushfit, including managing their cart. Currently, I’m having trouble with a bizarre bug in their cart.

When customers update their Shipping Country, a few things happen behind the scenes:

  1. If the country has a few shipping options, a <select> appears next to the Shipping title. Otherwise, the shipping method is displayed.
  2. The shipping/taxes & totals get updated.

On Chrome, Firefox, IE, Opera, Safari older than 5.0 and Safari for Windows, this works totally fine.

However, on Safari 5.0+ on OS X, the displayed text doesn’t update. What we’re doing is updating the “name” of the shipping method, via jQuery. After some ajax calls, there’s a little function that simply updates with an .html(); edit. Here’s what it should do:

Shipping to Europe on Most Browsers

When I update my country to “South Africa” in Firefox, I get:

Shipping Internationally

But when I do this in Safari 5.0+ on a Mac, I get this:

What Safari Shows

As you can see – somewhat borked. It doesn’t clear the old text and update the new text. If you highlight with a mouse, the updated text shows correctly. Viewing source code, all has been written. It’s purely a rendering issue. In the displayed case above, this isn’t the end of the world. However, alongside the shipping “name” we also update more pertinent information such as Shipping Amount, taxes & of course the order total. The source code is allĀ  updated, so if/when people actually click “place order”, all that is correct. But understandably we’re seeing a fairly high abandonment rate from Safari users.

To make matters worse, this code works perfectly on both my local dev environment (Mac, Apache) AND our staging environment (Windows 2008 Server, IIS). It’s only on production that its failing. Things I’ve isolated as NOT being the cause:

  • SSL: Same bug appears whether over SSL or not.
  • jQuery version: I’ve updated jQuery, rolled back jQuery.
  • CSS/JS served locally vs. from CDN: same.

We have a variety of rules for caching/not caching on the server to help speed up the site. I’ve turned on/off a variety of these with no success – but that remains the major difference between dev, staging & live.

Has anyone seen this? Could you, if you have 5 minutes, please try and recreate the issue and let me know if things work for you or not? To recreate:

  1. Using Safari, go to http://www.gsprushfit.com
  2. Click on the big red “Click here” at top right.
  3. Click on “Add to Cart”
  4. Set your country to, say, Canada in the Shipping section.
  5. Change your country to “Norway”
  6. Change your country to “South Africa”

With each country-change, both the info next to where it says “Shipping” should change. Above, at right, the shipping & Handling total should update too.

Please let me know in comments if this works for you.

%d bloggers like this: