From d148126b1db2b33b6ae245dcf0b49c13979dde7c Mon Sep 17 00:00:00 2001
From: Maxime Beauchemin <maximebeauchemin@gmail.com>
Date: Mon, 8 May 2017 16:13:09 -0700
Subject: [PATCH] [table] fixing CSS glitches on table view

Somehow the CSS trick we use to display histogram-type visual elements
in table views started showing some odd glitches since
what I believe was a not-so-recent version of webkit.

The bug is around the `linear-gradient` call under `background-image`
prop being used to show non-gradient or "hard" colors, while using
transparency.

I was able to find a workaround that addresses things in chrome by using
a fake [minimal] gradient instead of a flat color.
---
 superset/assets/visualizations/table.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/superset/assets/visualizations/table.js b/superset/assets/visualizations/table.js
index eae3edc751945..4a2709418ef8b 100644
--- a/superset/assets/visualizations/table.js
+++ b/superset/assets/visualizations/table.js
@@ -89,9 +89,11 @@ function tableVis(slice, payload) {
     .style('background-image', function (d) {
       if (d.isMetric) {
         const perc = Math.round((d.val / maxes[d.col]) * 100);
+        // The 0.01 to 0.001 is a workaround for what appears to be a
+        // CSS rendering bug on flat, transparent colors
         return (
-          `linear-gradient(to right, lightgrey, lightgrey ${perc}%, ` +
-          `rgba(0,0,0,0) ${perc}%)`
+          `linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.2) ${perc}%, ` +
+          `rgba(0,0,0,0.01) ${perc}%, rgba(0,0,0,0.001) 100%)`
         );
       }
       return null;