uPlot
uPlot copied to clipboard
leeoniya
small visual artifact in legend
Just a small visual artifact I noticed while playing with the legend in Chrome:
Due to the background-clip CSS property of .u-legend .u-marker some screens might show this. I guess it depends on screen resolution.
I suggest to get rid of background-clip and use outline instead of border (with some size tweaking) for the dynamically generated inline style. This way you can still support transparent colors.
Great work so far :+1: Florian
oof. i use the same strategy for hover points.
might have to switch to box-shadow instead of outline, since outlines cannot have a radius. but then we lose border-style/dash support.
https://stackoverflow.com/questions/5394116/outline-radius
i wonder how easy this is to trigger 🤔
i'd probably recommend disabling background-clip on a case-by-case basis (really it's there to allow for semi-transparent or dashed borders that are not tainted by the background color (due to box-sizing border-box)).
in the meantime it's worth reporting this to chrome team with a simple repro. they've solved bugs i've reported pretty consistently. some related to paint/box-shadow clipping.
https://bugs.chromium.org/p/chromium/issues/list?q=leeoniya&can=1
Damn I forgot about the border-radius :see_no_evil: ... but I noticed something: border-radius: 1px or anything other than 0 removes the artifact :facepalm: :sweat_smile: ... I guess this could be the easy way out for now.
let's see where this goes: https://bugs.chromium.org/p/chromium/issues/detail?id=1160941
got marked as a dupe of a regression that's been open for over a year :(
https://bugs.chromium.org/p/chromium/issues/detail?id=1000600
I guess this means it will take an arbitrary amount of time to get fixed :grimacing:
Btw, I've updated lazy with a new 'AutoSeries' feature (used in example2) to simplify creating charts that get new data each x seconds but should show only N data points at the same time :-)