Fix gradients for Safari. Resolves #8578

frontend/src/metabase-shared/color_selector.js

@@ -21,25 +21,9 @@ global.makeCellBackgroundGetter = function(
   const cols = JSON.parse(colsJSON);
   const settings = JSON.parse(settingsJSON);
   try {
-    const getter = makeCellBackgroundGetter(rows, cols, settings);
-    return (value, rowIndex, colName) => {
-      const color = getter(value, rowIndex, colName);
-      if (color) {
-        return roundColor(color);
-      }
-      return null;
-    };
+    return makeCellBackgroundGetter(rows, cols, settings);
   } catch (e) {
     print("ERROR", e);
     return () => null;
   }
 };
-
-// HACK: d3 may return rgb values with decimals but the rendering engine used for pulses doesn't support that
-function roundColor(color) {
-  return color.replace(
-    /rgba\((\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+\.\d+)\)/,
-    (_, r, g, b, a) =>
-      `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`,
-  );
-}

frontend/src/metabase/lib/colors.js

@@ -132,6 +132,16 @@ export const getColorScale = (
     .range(colors);
 };
 
+// HACK: d3 may return rgb values with decimals but certain rendering engines
+// don't support that (e.x. Safari and CSSBox)
+export function roundColor(color) {
+  return color.replace(
+    /rgba\((\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+(?:\.\d+)),\s*(\d+\.\d+)\)/,
+    (_, r, g, b, a) =>
+      `rgba(${Math.round(r)},${Math.round(g)},${Math.round(b)},${a})`,
+  );
+}
+
 export const alpha = (color: ColorString, alpha: number): ColorString =>
   Color(color)
     .alpha(alpha)

frontend/src/metabase/visualizations/lib/table_format.js

@@ -3,7 +3,7 @@
 // NOTE: this file is used on the frontend and backend and there are some
 // limitations. See frontend/src/metabase-shared/color_selector for details
 
-import { alpha, getColorScale } from "metabase/lib/colors";
+import { alpha, getColorScale, roundColor } from "metabase/lib/colors";
 
 const CELL_ALPHA = 0.65;
 const ROW_ALPHA = 0.2;
@@ -149,14 +149,14 @@ function compileFormatter(
 
     const min =
       format.min_type === "custom"
-        ? format.min_value
+        ? parseFloat(format.min_value)
         : format.min_type === "all"
           ? // $FlowFixMe
             Math.min(...format.columns.map(columnMin))
           : columnMin(columnName);
     const max =
       format.max_type === "custom"
-        ? format.max_value
+        ? parseFloat(format.max_value)
         : format.max_type === "all"
           ? // $FlowFixMe
             Math.max(...format.columns.map(columnMax))
@@ -167,10 +167,11 @@ function compileFormatter(
       return () => null;
     }
 
-    return getColorScale(
+    const scale = getColorScale(
       [min, max],
       format.colors.map(c => alpha(c, GRADIENT_ALPHA)),
     ).clamp(true);
+    return value => roundColor(scale(value));
   } else {
     console.warn("Unknown format type", format.type);
     return () => null;