Android and iOS9 General Sibling Selector (~) Bug

Update: Looks like iOS9 is exhibiting the same issue.

In my experiment’s I’ve often found that certain native Android (4.x) email clients do not support the general sibling selector (~). I’ve never gotten it to work reliably on my LG Realm (4.2.2) smartphone whereas the adjacent sibling selector (+) works consistently.

The general sibling selector is handy because it offers more creative freedom than the adjacent sibling selector.

In my tests, this would work:

But this wouldn’t work:



The Bugfix

After doing some searches, I found this “bugfix” that enabled the general sibling selector usage on 4.x Android clients.

This fix seems pretty arbitrary and it was intended to address a similar bug in the Android browser, but I’ve found that it does its job in the Android email client as well.

There’s also some complaints that it may increase CPU load on the device. However, as recipients don’t spend more than a few seconds on an email, this may not be as big of an issue.

Will it matter?

Considering that the latest version of the Android OS – 5.0 Lollipop – replaced the native email client with the hobbled Gmail app, this fix may be moot since neither sibling selectors would be available.

However if you want general sibling selector support on the majority of Android clients currently, this fix may come in handy.



Latest Comments
  1. Rémi

    Thanks for this article ! It seems that the current iOS 9 beta is also affected by this bug. The general sibling selector doesn’t work properly when used in a :hover or :checked selector. The fix proposed in this article works (and it also work without the -webkit- prefixes, since iOS 9 has support for unprefixed animations).

    • Justin

      This is strange! Both that iOS manifested the bug after Android and the fact that this weird technique addresses it :) Hoping the formal release won’t require it.

  2. Shubhansh

    Got similar issue with classes as well in iOS 9 Beta release. e.g.
    .foo ~ .bar {
    background-color: green;
    }
    .foo.lorem ~ .bar {
    background-color: yellow;
    }

    Background color was not changing on removing “lorem” class from “foo”.

    Fix:
    Just put the animation declaration on the common parent of both “.foo” and “.bar”. No need to put even animation declaration.
    i.e.
    animation: bugfix infinite 1s;

    thats it.
    Hope it help others seeking solution.

  3. Stephen

    For those looking for a non-CPU-intensive workaround, you may be able to get away with using multiple adjacent sibling selectors if you know what is in between.

    In my case, input:checked ~ menu didn’t work, but since all that existed between the items was a label, input:checked + label + menu was the simplest workaround.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">