Use CSS to support fast image rendering on linear axes

src/traces/image/plot.js

@@ -10,17 +10,12 @@
 
 var d3 = require('d3');
 var Lib = require('../../lib');
+var strTranslate = Lib.strTranslate;
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 var constants = require('./constants');
 
 var unsupportedBrowsers = Lib.isIOS() || Lib.isSafari() || Lib.isIE();
 
-function compatibleAxis(ax) {
-    return ax.type === 'linear' &&
-        // y axis must be reversed but x axis mustn't be
-        ((ax.range[1] > ax.range[0]) === (ax._id.charAt(0) === 'x'));
-}
-
 module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
     var xa = plotinfo.xaxis;
     var ya = plotinfo.yaxis;
@@ -31,7 +26,7 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
         var plotGroup = d3.select(this);
         var cd0 = cd[0];
         var trace = cd0.trace;
-        var fastImage = supportsPixelatedImage && !trace._hasZ && trace._hasSource && compatibleAxis(xa) && compatibleAxis(ya);
+        var fastImage = supportsPixelatedImage && !trace._hasZ && trace._hasSource && xa.type === 'linear' && ya.type === 'linear';
         trace._fastImage = fastImage;
 
         var z = cd0.z;
@@ -144,8 +139,19 @@ module.exports = function plot(gd, plotinfo, cdimage, imageLayer) {
         // Pixelated image rendering
         // http://phrogz.net/tmp/canvas_image_zoom.html
         // https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
-        image3
-            .attr('style', 'image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;');
+        var style = 'image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: crisp-edges; image-rendering: pixelated;';
+        if(fastImage) {
+            // Flip the SVG image as needed (around the proper center location)
+            var axisScale = [
+                (xa.range[0] < xa.range[1]) ? 1 : -1,
+                (ya.range[0] < ya.range[1]) ? -1 : 1
+            ];
+            style += 'transform:' +
+                strTranslate(left + imageWidth / 2 + 'px', top + imageHeight / 2 + 'px') +
+                'scale(' + axisScale[0] + ',' + axisScale[1] + ')' +
+                strTranslate(-left - imageWidth / 2 + 'px', -top - imageHeight / 2 + 'px') + ';';
+        }
+        image3.attr('style', style);
 
         var p = new Promise(function(resolve) {
             if(trace._hasZ) {

test/jasmine/tests/image_test.js

@@ -423,9 +423,7 @@ describe('image plot', function() {
 
     [
       ['yaxis.type', 'log'],
-      ['xaxis.type', 'log'],
-      ['xaxis.range', [50, 0]],
-      ['yaxis.range', [0, 50]]
+      ['xaxis.type', 'log']
     ].forEach(function(attr) {
         it('does not renders pixelated image when the axes are not compatible', function(done) {
             var mock = require('@mocks/image_astronaut_source.json');
@@ -669,5 +667,55 @@ describe('image hover:', function() {
                 .then(done);
             });
         });
+
+        [
+            [true, true],
+            [true, 'reversed'],  // the default image layout
+            ['reversed', true],
+            ['reversed', 'reversed']
+        ].forEach(function(test) {
+            it('should show correct hover info regardless of axis directions ' + test, function(done) {
+                var mockCopy = Lib.extendDeep({}, mock);
+                mockCopy.layout.xaxis.autorange = test[0];
+                mockCopy.layout.yaxis.autorange = test[1];
+                mockCopy.data[0].colormodel = 'rgba';
+                mockCopy.data[0].hovertemplate = '%{z}<extra></extra>';
+                Plotly.newPlot(gd, mockCopy)
+                .then(function() {_hover(205, 125);})
+                .then(function() {
+                    assertHoverLabelContent({
+                        nums: '[202, 148, 125, 255]',
+                        name: ''
+                    }, 'variable `z` should be correct!');
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
+
+        [
+            [[-0.5, 511.5], [-0.5, 511.5]],
+            [[-0.5, 511.5], [511.5, -0.5]],  // the default image layout
+            [[511.5, -0.5], [-0.5, 511.5]],
+            [[511.5, -0.5], [511.5, -0.5]]
+        ].forEach(function(test) {
+            it('should show correct hover info regardless of axis directions ' + test, function(done) {
+                var mockCopy = Lib.extendDeep({}, mock);
+                mockCopy.layout.xaxis.range = test[0];
+                mockCopy.layout.yaxis.range = test[1];
+                mockCopy.data[0].colormodel = 'rgba';
+                mockCopy.data[0].hovertemplate = '%{z}<extra></extra>';
+                Plotly.newPlot(gd, mockCopy)
+                .then(function() {_hover(205, 125);})
+                .then(function() {
+                    assertHoverLabelContent({
+                        nums: '[202, 148, 125, 255]',
+                        name: ''
+                    }, 'variable `z` should be correct!');
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
     });
 });