Skip to content

Commit

Permalink
[table] fixing CSS glitches on table view
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mistercrunch committed May 8, 2017
1 parent 55d3b01 commit d148126
Showing 1 changed file with 4 additions and 2 deletions.
6 changes: 4 additions & 2 deletions superset/assets/visualizations/table.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit d148126

Please sign in to comment.