Android and iOS9 General Sibling Selector (~) Bug
-
Update: This issue appears to manifest in iOS9 but not the newer iOS10.
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:
.foo:hover + .foo2 {
opacity: 0;
}
But this wouldn’t work:
.foo:hover ~ .foo2 {
opacity: 0;
}
The Bugfix
After doing some searches, I found this “bugfix” that enabled the general sibling selector usage on 4.x Android clients.
body { -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }
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.
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
:hoveror:checkedselector. The fix proposed in this article works (and it also work without the -webkit- prefixes, since iOS 9 has support for unprefixed animations).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.
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.
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.