question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Smooth color transition creates a wrong offset

See original GitHub issue

Hello,

When using the color_thresholds feature with a hard transition, the colors are placed exactly like I expect them to be:

image

However, if I use the smooth transition instead (default mode), the red part completely disappears and the blue part becomes a lot bigger:

image

However, the dots have the right color when I hover the graph:

image

N.B: I’m using the version 0.11.0 of the card.

Here are the rendered linear gradients:

<!-- Hard mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-vhiq9t48e-0">
            <stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
            <stop stop-color="#00ff00" offset="44.78932714617168%"></stop>
            <stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
            <stop stop-color="#ff0000" offset="81.33225058004618%"></stop>
            <stop stop-color="#ff0000" offset="117.86542923433832%"></stop>
            <stop stop-color="#ff0000" offset="117.87517401392067%"></stop>
</linearGradient>

<!-- Smooth mode -->
<linearGradient gradientTransform="rotate(90)" id="grad-qdc5p29le-0">
            <stop stop-color="#0000ff" offset="44.77958236658934%"></stop>
            <stop stop-color="#00ff00" offset="81.32250580046383%"></stop>
            <stop stop-color="#827c00" offset="117.86542923433832%"></stop>
</linearGradient>

I tried to manually edit the gradient offsets, and this gradient looks way better:

<linearGradient gradientTransform="rotate(90)">
            <stop stop-color="#0000ff" offset="0"></stop>
            <stop stop-color="#00ff00" offset="44.77958236658934%"></stop>
            <stop stop-color="#827c00" offset="81.32250580046383%"></stop>
</linearGradient>

image

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:1
  • Comments:5

github_iconTop GitHub Comments

1reaction
bokubcommented, Feb 15, 2022

Hmmm, I was thinking there’s an error in the computed “offsets” in smooth mode, but I might be wrong.

The color of the dots and the colors in “hard” mode are just my “proofs” that the displayed color is not the one we expect to see.

0reactions
stale[bot]commented, Apr 16, 2022

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. If this is still an active issue, please let us know!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Flutter - Smooth transition color for LinearGradient
A possible solution is to create a background image with the gradient in Photoshop. After you are happy with the image, cut it...
Read more >
transition | CSS-Tricks
.element { transition: background-color 0.5s ease; } ... How to Create a Realistic Motion Blur with CSS Transitions.
Read more >
Avoiding Color Blips When Knitting Stripes HD version
Support me by buying me a coffee on Ko-Fi! https://www.ko-fi.com/roxannerichardsonHow to knit stripes in textured fabric without getting ...
Read more >
transition - CSS: Cascading Style Sheets - MDN Web Docs
The transition CSS property is a shorthand property for transition-property, transition-duration, transition-timing-function, ...
Read more >
Using gradients for abrupt color changes in data ...
To get a clean jump from grey to a color we have to append two color stops at the same offset percentage. We...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found