Skiplinks in Opera Mini

Usually when I build a navigation it is at the end of the source and a skiplink appears at the top of small viewports linking to it. I then enhance it using CSS and JavaScript so that most devices and browsers get something nicer—an off-canvas interaction perhaps.

Over the past while I’ve been getting a frequent but not consistent problem with that pattern in one of my favourite browsers, Opera Mini. The skiplink would either reload the page or do nothing. It didn’t happen on every website and I could never find a common thread between those that had the problem.

Sometimes the exact same navigation pattern would work on one site and not on another. It was infuriating tbqh.

I had email conversations with a couple of people at Opera devrel, and although they were friendly and helpful we were never able to get to the bottom of it.

Last Thursday (2015-07-30) I read an article by Tim Kadlec on proxy browsers and asked him if he ever encountered this problem with Opera Mini. Not really, he replied, but remembered something about click events getting in the way.

Turns out that was the clue I needed. Any JS that has click events needs to be kept away from Opera Mini using a mustard cut. Add 'localStorage' in window to your feature test and job done. Skiplinks are now working for me in Opera Mini after too much time spent in various states between giving up and hair-tearingly frustrated.

That was the technical problem, but the root of the problem was me not doing my job properly. I already had a mustard cut in place that adds a class of, funnily enough, js-mustard to the html element, and I assumed it would be enough.

Why Opera Mini?

Now if you’re wondering why I bother with Opera Mini when the sites I build at the day job will probably never be useful to someone who lives in countries where Opera Mini is widely used, it’s for two very simple reasons.

Firstly, I use Opera Mini a lot. If I need data abroad (and that includes the Republic of Ireland in the operators' opinion) I use Opera Mini. If I’m somewhere with slow mobile internet (large parts of Northern Ireland) I use Opera Mini. If I’m on crappy wifi (all wifi in public places, apparently) I use Opera Mini. And I can’t be the only person using it to compensate for a lack of performance in websites and the network.

But this isn’t all personal, it’s on principle too. I can neither predict nor control how people view websites. The standard person-in-tech idea of a decent laptop, fast phone and reliable broadband is not the everyday experience of anybody outside our offices and studios. Progressive enhancement saves us from this delusion, and making a decent experience in Opera Mini is quite simply part of my job.