pt/superset
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2024-09-12 00:29:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

[table] fixing CSS glitches on table view (#2725)

Browse Source 
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.
This commit is contained in:
Maxime Beauchemin 2017-05-08 17:59:23 -07:00 committed by GitHub
parent 55d3b012e5
commit aeebd8840d
1 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
superset/assets/visualizations/table.js
View File

@ -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;