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!