use visibility instead of opacity to hide elements

Author: archmoj

src/plots/cartesian/axes.js

@@ -2865,7 +2865,7 @@ axes.drawGrid = function(gd, ax, opts) {
         .attr('d', opts.path)
         .call(Color.stroke, ax.gridcolor || '#ddd')
         .style('stroke-width', ax._gw + 'px')
-        .style({ opacity: 1 }); // ensure visible
+        .style({ visibility: 'visible' });
 
     if(((ax._anchorAxis || {}).ticklabelposition || '').indexOf('inside') !== -1) {
         if(ax._hideCounterAxisInsideTickLabels) {
@@ -3035,7 +3035,7 @@ axes.drawLabels = function(gd, ax, opts) {
                 });
 
                 if(isInside) {
-                    thisText.style({ opacity: 1 }); // ensure visible
+                    thisText.style({ visibility: 'visible' });
 
                     if(ax._hideOutOfRangeInsideTickLabels) {
                         ax._hideOutOfRangeInsideTickLabels();
@@ -3080,7 +3080,7 @@ axes.drawLabels = function(gd, ax, opts) {
                         else if(bb.top + (ax.tickangle ? 0 : d.fontSize / 4) < min) hide = true;
                     }
                     if(hide) {
-                        thisLabel.select('text').style({ opacity: 0 });
+                        thisLabel.select('text').style({ visibility: 'hidden' });
                     } else {
                         visibleLabelMin = Math.min(visibleLabelMin, isX ? bb.top : bb.left);
                         visibleLabelMax = Math.max(visibleLabelMax, isX ? bb.bottom : bb.right);
@@ -3103,7 +3103,7 @@ axes.drawLabels = function(gd, ax, opts) {
                     var q = ax.l2p(d.x) + ax._offset;
 
                     if(q < ax._visibleLabelMax && q > ax._visibleLabelMin) {
-                        d3.select(this).style({ opacity: 0 });
+                        d3.select(this).style({ visibility: 'hidden' });
                     }
                 });
             });