Infinite animation on the body to solve the general/adjacent sibling …

…selector bug #45168 in WebKit (Android <= 4.1.2) causes high CPU/GPU load due to the rendering engine reflow calculations as mentioned in http://css-tricks.com/webkit-sibling-bug/ . Wrapping the label and the menu within a div enables us to use a selector chain that does not require any animation and still works across all browsers. This does not cause reflows / layout thrashing and has been successfully tested. Thanks to http://stackoverflow.com/a/14201802 for the input on how to fix it.
micjamking · Oct 15, 2013 · 62ef965 · 62ef965
1 parent ae6c8e4
commit 62ef965
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -11,19 +11,21 @@ To use `navigataur.css`, reference the stylesheet in the `<head>` of your docume
 
 To work out of the box, you will need to make the following adjustments to your markup (classes can be changed in the stylesheet if you use something different):
 * An outer `<div>` with a class of `header` 
-* An `input[type=checkbox]` with an ID of `toggle` and a `label[for=toggle]` with a class of `toggle` and an `onclick` attribute just above your list menu.
+* An `input[type=checkbox]` with an ID of `toggle` and a `div` wrapping around a `label[for=toggle]` with a class of `toggle` and an `onclick` attribute just above your list menu.
 * The label also requires two data attributes for displaying the menu open/close text, allowing for complete localisation.
-* A list menu (either ul or ol) with a class of `menu`
+* A list menu (either ul or ol) with a class of `menu`, followed by the closing `div`
 
 ```
 <input type="checkbox" id="toggle" />
-<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label>
-<ul class="menu">
-  <li><a href="#">Google</a></li>
-  <li><a href="#">Facebook</a></li>		
-  <li><a href="#">Youtube</a></li>	
-  <li><a href="#">Twitter</a></li>	
-</ul>
+<div>
+	<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu" onclick></label>
+	<ul class="menu">
+	  <li><a href="#">Google</a></li>
+	  <li><a href="#">Facebook</a></li>		
+	  <li><a href="#">Youtube</a></li>	
+	  <li><a href="#">Twitter</a></li>
+	</ul>
+</div>
 ```
 
 That's it! Everything works out of the box with this setup. However, like any CSS plugin/snippet, you will probably want to stylize it to match your sites theme. I've separated all functional CSS from the presentational CSS so you can jump right in and change everything you need without breaking the plugin. Just edit as needed below the following CSS comment:

diff --git a/navigataur.css b/navigataur.css
@@ -18,9 +18,6 @@
 /*--------------------------------
  Functional Styles (Required)
 ---------------------------------*/
-/* Tim Pietrusky advanced checkbox hack (Android <= 4.1.2) */
-body{ -webkit-animation: bugfix infinite 1s; }
-@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }
 
 .header { position: relative; }
 #toggle, .toggle { display: none; }
@@ -35,7 +32,7 @@ body{ -webkit-animation: bugfix infinite 1s; }
 	.menu > li { display: block; width: 100%; margin: 0; }
 	.menu > li > a { display: block; width: 100%; text-decoration: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
 	.toggle { display: block; position: relative; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
-	#toggle:checked ~ .menu { display: block; opacity: 1;}
+	#toggle:checked + div .menu { display: block; opacity: 1;}
 }
 
 
@@ -139,7 +136,7 @@ body{ -webkit-animation: bugfix infinite 1s; }
 		background: #45ABD6;
 	}
 
-	#toggle:checked + .toggle:after{
+	#toggle:checked + div .toggle:after{
 		content: attr(data-close);
 	}
 }