jQuery + Safari for iPhone = Parse Error?
Currently, as often as not one can meet a requirement for Safari support for iPhone / iPad in a technical specification for website development.
So, one of itseedbed’s regular clients from Germany wanted, among other things, this Safari support for iPhone / iPad to be implemented on his new website.
Having successfully finished the development of the project, we started the testing stage. Everything worked fine ... but not on the client’s iPhone! The console of the device showed a Parse Error (see the screenshot), and, accordingly, the whole jQuery-based interface of the website stopped working.
The issue was getting more confusing considering the fact that everything was running like a clock on our iPhone. We began to look for a root cause and, to tell the truth, were stumped for a while. But, finally, our efforts met with success.
It turned out that the glitch was neither in the relative paths generated by the CMS, nor in the new version of iOS (5.0.1), and not even in Safari for iPhone. The problem was in the T-Mobile mobile network operator!!! To be more precise, it was not in the operator itself but in the way its traffic optimization methods correlated with the code from jQuery library.
The point is that the mobile network operator tries to optimize traffic so that websites can be downloaded quicker on its clients’ mobiles. One of the methods of this optimization involves removing all comments from JS files in order to reduce their “weight”. The traffic optimizer appears to be looking for begin/end-of-comment markers (/* and */, respectively) and removes everything between them before loading the file. At the same time, jQuery 1.4.1 library (and it was the version we had to work with) uses */* symbols twice in its code for internal purposes. Thus, the contents between */* pair (i.e., */* … */*) was “successfully” cut on its way to a user. As a result, it was a piece of working code that was “optimized” and not the comments. That’s all – the jQuery library stops functioning and the website interface becomes static.
Knowing the root cause, it was not difficult to solve the problem. In both places where the problem occurred, the sequence */* was replaced with ["*/"]+["*"]. After these transformations, the website began working properly on the client’s iPhone.
Useful links:
www.mysociety.org/2011/08/11/mobile-operators-breaking-content/ – the article describes the cause of the problem and says that it is not only T-Mobile that optimizes traffic in this way.
bugs.jquery.com/ticket/9969, bugs.jquery.com/ticket/10098 – the discussion of the problem on the jQuery bug tracker.
According to the latest news from jQuery bug tracker, the problem is still actual. So, community users advice to use a hosted version of the library: http://code.jquery.com/jquery-1.7.1.min.js.
