mirror of
https://github.com/apache/superset.git
synced 2024-09-17 11:09:47 -04:00
[table] fixing CSS glitches on table view (#2725)
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:
parent
55d3b012e5
commit
aeebd8840d
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user