diff --git a/examples/bind-input.html b/examples/bind-input.html
index 051351c34e..baba69a9b4 100644
--- a/examples/bind-input.html
+++ b/examples/bind-input.html
@@ -35,6 +35,7 @@
           <p id="shortdesc">Demonstrates two-way binding of HTML input elements to OpenLayers objects.</p>
           <div id="docs">
             <p>See the <a href="bind-input.js" target="_blank">bind-input.js source</a> to see how this is done.</p>
+            <p id="has-webgl" style="display: none">With the <a href="?renderer=webgl">WebGL renderer</a>, <strong>hue</strong>, <strong>saturation</strong>, <strong>contrast</strong> and <strong>brightness</strong> can also be controlled.</p>
             <div id="no-webgl" class="alert alert-warning" style="display: none">
               <h4>Warning!</h4>
               A browser that supports <a href="http://get.webgl.org/">WebGL</a> is required to change the
@@ -53,14 +54,16 @@
               </label>
               <label>opacity</label>
               <input id="opacity" type="range" min="0" max="1" step="0.01"/>
+            </fieldset>
+            <fieldset id="webgl" style="display: none">
               <label>hue</label>
-              <input id="hue" class="webgl" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
+              <input id="hue" type="range" min="-3.141592653589793" max="3.141592653589793" step="0.01"/>
               <label>saturation</label>
-              <input id="saturation" class="webgl" type="range" min="0" max="5" step="0.01"/>
+              <input id="saturation" type="range" min="0" max="5" step="0.01"/>
               <label>contrast</label>
-              <input id="contrast" class="webgl" type="range" min="0" max="2" step="0.01"/>
+              <input id="contrast" type="range" min="0" max="2" step="0.01"/>
               <label>brightness</label>
-              <input id="brightness" class="webgl" type="range" min="-1" max="1" step="0.01"/>
+              <input id="brightness" type="range" min="-1" max="1" step="0.01"/>
             </fieldset>
           </form>
         </div>
diff --git a/examples/bind-input.js b/examples/bind-input.js
index 716c870d2a..0ed834d695 100644
--- a/examples/bind-input.js
+++ b/examples/bind-input.js
@@ -6,21 +6,19 @@ goog.require('ol.layer.Tile');
 goog.require('ol.source.OSM');
 
 
-if (!ol.BrowserFeature.HAS_WEBGL) {
-  var inputs = document.getElementsByClassName('webgl');
-  for (var i = 0, len = inputs.length; i < len; i++) {
-    inputs[i].disabled = true;
-  }
-  var info = document.getElementById('no-webgl');
-  /**
-   * display warning message
-   */
-  info.style.display = '';
+function checkWebGL(evt) {
+  document.getElementById('no-webgl').style.display =
+      ol.BrowserFeature.HAS_WEBGL ? 'none' : '';
+  document.getElementById('has-webgl').style.display =
+      ol.BrowserFeature.HAS_WEBGL && !evt.glContext ? '' : 'none';
+  document.getElementById('webgl').style.display =
+      evt.glContext ? '' : 'none';
 }
 
 var layer = new ol.layer.Tile({
   source: new ol.source.OSM()
 });
+layer.once('precompose', checkWebGL);
 
 var view = new ol.View2D({
   center: [0, 0],