{"id":1875,"date":"2015-07-23T01:01:02","date_gmt":"2015-07-23T01:01:02","guid":{"rendered":"http:\/\/freshinbox.com\/blog\/?p=1875"},"modified":"2017-02-05T05:03:22","modified_gmt":"2017-02-05T05:03:22","slug":"android-css-general-sibling-selector-bug","status":"publish","type":"post","link":"https:\/\/freshinbox.com\/blog\/android-css-general-sibling-selector-bug\/","title":{"rendered":"Android and iOS9 General Sibling Selector (~) Bug"},"content":{"rendered":"<ul>\n<b>Update:<\/b> This issue appears to manifest in iOS9 but not the newer iOS10.<\/p>\n<p>In my experiment&#8217;s I&#8217;ve often found that certain native Android (4.x) email clients do not support the general sibling selector (~). I&#8217;ve never gotten it to work reliably on my LG Realm (4.2.2) smartphone whereas  the adjacent sibling selector (+) works consistently. <\/p>\n<p>The general sibling selector is handy because it offers more creative freedom than the adjacent sibling selector.<\/p>\n<p>In my tests, this would work:<\/p>\n<pre class=\"lang:default decode:true \" >.foo:hover + .foo2 {\r\n  opacity: 0;\r\n}<\/pre>\n<p>But this wouldn&#8217;t work:<\/p>\n<pre class=\"lang:default decode:true \" >.foo:hover ~ .foo2 {\r\n  opacity: 0;\r\n}<\/pre>\n<p><BR><BR><\/p>\n<h4>The Bugfix<\/h4>\n<p>After doing some searches, I found <a href=\"https:\/\/css-tricks.com\/webkit-sibling-bug\/\" target=\"_blank\">this &#8220;bugfix&#8221;<\/a> that enabled the general sibling selector usage on 4.x Android clients.<\/p>\n<pre class=\"lang:default decode:true \" >body { -webkit-animation: bugfix infinite 1s; } \r\n@-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }<\/pre>\n<p>This fix seems pretty arbitrary and it was intended to address a similar bug in the Android browser, but I&#8217;ve found that it does its job in the Android email client as well.<\/p>\n<p>There&#8217;s also some complaints that it may increase CPU load on the device. However, as recipients don&#8217;t spend more than a few seconds on an email, this may not be as big of an issue.<BR><BR><\/p>\n<h4>Will it matter?<\/h4>\n<p>Considering that the latest version of the Android OS &#8211; 5.0 Lollipop &#8211; replaced the native email client with the hobbled Gmail app, this fix may be moot since neither sibling selectors would be available. <\/p>\n<p>However if you want general sibling selector support on the majority of Android clients currently, this fix may come in handy.<\/p>\n<p><BR><br \/>\n<div style=\"padding:10px; border: 2px solid #99C731;background-color:#FFF8DC;border-radius:5px;\">\n<form action=\"https:\/\/freshinbox1.createsend.com\/t\/i\/s\/adrmi\/\" method=\"post\" id=\"subForm\">\n<span class=\"fisub_header\" style=\"font-weight:bold;\">Subscribe to the #EmailGeeks Newsletter<\/span>\n<p><input id=\"fieldEmail\" name=\"cm-adrmi-adrmi\" type=\"email\" style=\"width:90%\" required placeholder=\"Your Email Address\" \/><\/p>\n<p><button type=\"submit\">Subscribe<\/button><\/p>\n<\/form>\n<\/div> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>In my experiment&#8217;s I&#8217;ve often found that certain native Android (4.x) email clients do not support the general sibling selector (~). The general sibling selector is handy because it offers more creative freedom than the adjacent sibling (+) selector&#8230;<\/p>\n","protected":false},"author":2,"featured_media":1884,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23,24],"tags":[],"_links":{"self":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/1875"}],"collection":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/comments?post=1875"}],"version-history":[{"count":25,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions"}],"predecessor-version":[{"id":3331,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/posts\/1875\/revisions\/3331"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media\/1884"}],"wp:attachment":[{"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/media?parent=1875"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/categories?post=1875"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/freshinbox.com\/blog\/wp-json\/wp\/v2\/tags?post=1875"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}