Skip to content

Opera mini and repaints

As part of a project, and using fufu as a sort of base, I got bitten by a particular bug: Opera Mini and repaints.

Opera Mini is awesome and has surprisingly good support for a lot of things (except, strangely, border-radius). Since it supports CSS3 selectors, and doesn’t support client-side JS, I decided to use :target for a bit of accordion-like User Interface.

I used a list-accordion class with a cunning combination of IDs and nested things, like this:

<ul class="list-plain list-accordion">
  <li id="list-item-1">
    <a href="#list-item-1" class="list-accordion-header">Accordion item header the first</a>
    <p class="list-accordion-item">Accordion item header the first</p>
  </li>
  <li id="list-item-2">
    <a href="#list-item-2" class="list-accordion-header">Accordion item header the second</a>
    <p class="list-accordion-item">Accordion item the second</p>
  </li>
</ul>

Here’s an example of the list accordion in action, and here’s the (Sass-flavoured) CSS for it. Accordion items that are not the subject of a :target are hidden. That means that the one that is the subject of a target is shown (because the display: none isn’t being applied). Yes, it’s a bit odd.

Opera Mini Fights Back

This was working great, except on Opera Mini. After some poking and prodding, I remembered that I should just search and see who else has had this problem.

I found Zach Leatherman’s issue on Scott Jehl’s (currently quite quiet Device Bugs repo): Opera Mini doesn’t repaint :target CSS rules after page load #44. His suggested fix is to add an empty onclick, forcing a server request, and therefore a page load. It didn’t quite make sense to do this for these tiny accordions, so I searched a bit more.

I found another post, Nav toggle via CSS :target which seemed a bit better, and worked, but it felt like a bit of a hack.

In the end, I (slightly unhappily) settled on sniffing for Opera Mini (which Opera do in fact recommend), and over-riding the :target styles that worked for most other browsers.

I have learned a lot about about compromises. And that coffee and willpower can keep me coding even when I’m kind of ill!