Web Development

jQuery Steps plugin broken on Safari 11 when content has the $ character

We are using an old plugin called jQuery Steps in one of our important page. We received reports that the page is not working on a Mac High Sierra using Safari 11. I fired a BrowserStack test and found out that indeed, it is broken on Safari 11.

The $ (dollar) character

I’ve found out that the jQuery Steps plugin only stops working when it encounters a $ character on its contents, whether the plain $ character or the HTML entity encoded equivalent. I suspect it tries to interpret the $ character as the $ from the jQuery plugin or it could be a bug somewhere in the browser, although I cannot be sure.

The good thing about our UI design is that we don’t really need to show the dollar sign beside the numbers since it is the only currency we support. Also, in that specific page, the dollar symbols are placed as a textbox decorator, which is placed inside a span beside the textbox.

Workaround

The bug only happens in Safari 11, as we’ve only verified it on Safari 11 on Mac High Sierra. As a workaround, we just replaced the $ (dollar) symbol with a FontAwesome icon. It only works because our UI allows us to replace the $ symbol without breaking the layout/design.

Note that our page is loading a lot of stuff that may contributed to the issue with Safari, but we can only see the $ symbol issue as the main culprit and we don’t dig further on why it happens.

That’s it!

4 thoughts on “jQuery Steps plugin broken on Safari 11 when content has the $ character”

  1. I got the same issue and with also good thing is that I am using the $ symbol in side span tag.
    I replaced that tag as you had used fontawesome icon its started working fine, in other browsers even in IE the site working fine and also on safari 5.1.4 window it’s not breaking but in safari on mac its breaks the form steps.

    Thanks for your article that help me to resolve the big error.

  2. I just got burned by the same thing, and your blog post just saved me lots of debugging – thanks!

Leave a reply

Your email address will not be published. Required fields are marked *