Switch from using opacity to visibility to show/hide elements

dist/rzslider.js

 /*! angularjs-slider - v5.0.0 - 
  (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-06-30 */
+ 2016-07-01 */
 /*jslint unparam: true */
 /*global angular: false, console: false, define, module */
 (function(root, factory) {
@@ -1287,7 +1287,7 @@
        */
       hideEl: function(element) {
         return element.css({
-          opacity: 0
+          visibility: 'hidden'
         });
       },
 
@@ -1303,7 +1303,7 @@
         }
 
         return element.css({
-          opacity: 1
+          visibility: 'visible'
         });
       },
 

src/rzslider.js

@@ -1291,7 +1291,7 @@
        */
       hideEl: function(element) {
         return element.css({
-          opacity: 0
+          visibility: 'hidden'
         });
       },
 
@@ -1307,7 +1307,7 @@
         }
 
         return element.css({
-          opacity: 1
+          visibility: 'visible'
         });
       },
 

tests/specs/helper-functions-test.js

@@ -130,22 +130,22 @@
       it('should have a valid hideEl', function() {
         var el = angular.element('<div></div>');
         helper.slider.hideEl(el);
-        expect(el.css('opacity')).to.equal('0');
+        expect(el.css('visibility')).to.equal('hidden');
       });
 
       it('should have a valid showEl when not rzAlwaysHide', function() {
         var el = angular.element('<div></div>');
         helper.slider.showEl(el);
-        expect(el.css('opacity')).to.equal('1');
+        expect(el.css('visibility')).to.equal('visible');
       });
 
       it('should have a valid showEl when rzAlwaysHide', function() {
         var el = angular.element('<div></div>');
-        el.css('opacity', 0);
+        el.css('visibility', 'hidden');
         el.rzAlwaysHide = true;
 
         helper.slider.showEl(el);
-        expect(el.css('opacity')).to.equal('0');
+        expect(el.css('visibility')).to.equal('hidden');
       });
 
       it('should have a valid setPosition for horizontal sliders', function() {

tests/specs/labels-test.js

@@ -29,8 +29,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('1');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('1');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('visible');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('visible');
     });
 
     it('should hide floor and display ceil labels when handle is at min', function() {
@@ -42,8 +42,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('1');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('visible');
     });
 
     it('should show floor and hide ceil labels when handle is at max', function() {
@@ -55,8 +55,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('1');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('visible');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });
 
     it('should display floor and ceil labels when handle is at the middle for RTL slider', function() {
@@ -69,8 +69,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('1');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('1');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('visible');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('visible');
     });
 
     it('should hide floor and display ceil labels when handle is at min for RTL slider', function() {
@@ -83,8 +83,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('1');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('visible');
     });
 
     it('should show floor and hide ceil labels when handle is at max for RTL slider', function() {
@@ -97,8 +97,8 @@
         }
       };
       helper.createSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('1');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('visible');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });
 
     it('should hide floor and ceil labels when minHandle is at min and maxHandle at max for range slider', function() {
@@ -111,8 +111,8 @@
         }
       };
       helper.createRangeSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });
 
     it('should hide floor and ceil labels when minHandle is at min and maxHandle at max for range RTL slider', function() {
@@ -126,8 +126,8 @@
         }
       };
       helper.createRangeSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });
 
     it('should hide floor and ceil labels when cmb label is overlapping, for range slider', function() {
@@ -145,8 +145,8 @@
       };
 
       helper.createRangeSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });
 
     it('should hide floor and ceil labels when cmb label is overlapping, for range RTL slider', function() {
@@ -164,8 +164,8 @@
         rightToLeft: true
       };
       helper.createRangeSlider(sliderConf);
-      expect(helper.slider.flrLab.css('opacity')).to.equal('0');
-      expect(helper.slider.ceilLab.css('opacity')).to.equal('0');
+      expect(helper.slider.flrLab.css('visibility')).to.equal('hidden');
+      expect(helper.slider.ceilLab.css('visibility')).to.equal('hidden');
     });