These days I had to solve the issue that it was not possible to add configurable products to the cart on iPhones. After some testing, it turned out that this issue also occurred on Macs. It turned out that this issue also occurred on all Webkit-based browsers. But how do you check and solve Webkit issues on Ubuntu?
So which options did I try to reproduce such an issue on Ubuntu?
- Chrome mobile emulator
Of course it was not enough to use the mobile emulator of Chrome/Chromium to reproduce the issue. - Try to reproduce the issue with one of the main (Ubuntu) browsers.
The problem is that Firefox uses Gecko, Chrome/Chromium now uses Blink (which indeed is a Webkit fork, but that did not help) and that Opera is not really available on Ubuntu any more (and also uses Blink by the way). - Use PlayOnLinux to install Safari directly on Ubuntu.
I thought that this is a great option, but unfortunately, either Safari on PlayOnLinux is damaged or my PlayOnLinux installation is damaged. In any case, I was not able to use it – it crashed all the time. - But hey, browsers are the new operating systems, so what about a nice tool which emulates devices such as BrowserStack, Sauce Labs or Cross Browser Testing?
I tried Sauce Labs, but it was awfully slow, which is probably not their fault, but caused by the VM and the internet connection. - There must be a Webkit-based browser for Ubuntu!!!
Damn it, why didn’t I try that one earlier… Simply install the awesome Midori, which is easy to install from a third-party PPA, which is based on Webkit and has nice developer tools and solve your issue there!
Happy debugging 😉
By the way, in this case, the issue was caused by the wrong usage of jQuery’s attr() function. Since jQuery 1.6, attr() should only be used for „static“ attribute values like title. prop() should be used for somehow more „dynamic“ property values like „selected“. As a side note, it seems to be better to use prop when in doubt. For a good read, check this StackOverflow topic.