A crash course on the importance of cross-browser testing

Having trumpeted the successful launch of my startup’s minimal-viable-product on our first customers website yesterday, I went to bed feeling pretty satisfied with the week’s work.

I woke up this morning to find a tweet and a comment on my blog alerting me to an issue with the site. Dave kindly tweeted to say he was getting Http 404 errors when clicking links to view sermons. I checked the site again, and it “worked for me”^TM so I concluded it was just a one off issue, and hoped it would go away. Then Mark commented that he was getting problems when viewing the site in Firefox. Ah!

Rob and I developed the site using Google Chrome. I also tested it on Safari on my iPad. Both worked fine, so I optimistically assumed it worked everywhere.

Prompted by Mark’s comment I downloaded Firefox, and tried the site for myself. Instead of this:

I saw this:

I quickly diagnosed the problem: Firefox wasn't loading the css file that styles the content our script injects into the site. Our script was loading the style sheet dynamically by injecting a <link/> element into the page immediately before our content. This was working fine in Chrome and Safari – both Webkit based browsers. In Firefox, and IE, that technique didn’t work. It seems that IE requires style sheets to be added using the createStyleSheet method, and Firefox is picky, and requires the stylesheets be injected into the <head/> element. Fortunately, a google search turned up a StackOverflow post giving a cross-browser technique for injecting style sheets.

That was the first problem solved. The bigger problem was the links not working. In Firefox, clicking the links showed 404 errors in the page. In IE, they just didn’t work at all.

The cause of this problem lay in the code that takes the html returned by our server and injects it into our customers page. That code has to rewrite all links to make them use hash bangs, so that we can intercept the clicks and post back to our server rather than the customers. In the process of rewriting we were using the document.location.origin property. Turns out, that’s only supported by Webkit browsers. Once again, StackOverflow had the solution.

The problems should all hopefully now be fixed, and welcomehallchurch.org/sermons powered by TruthVine should be working across all three major browsers.

Next time I’ll remember to test on all three browsers first before launching!