Animation of the Gauge of the type Tank Level doesn't match the fill percentage

[BlueSialia]

Current Behavior

The wave animation only matches the fill percentage at low percentages. Anything above 15-25% and it won't raise anymore. This limit appears to be tied with the browser aspect ratio or resolution.

Expected Behavior

The wave animation to match the fill percentage. Like in this article where the wave animation matches the 52%.

Steps To Reproduce

One can observe at this live Dashboard the behavior I'm describing.

Environment

• Dashboard version: 1.17.1
• Node-RED version: 4.0.3
• Node.js version: v20.17.0
• npm version: 10.8.2
• Platform/OS: Pop!_OS 22.04 LTS
• Browser: Firefox 130.0.1

Have you provided an initial effort estimate for this issue?

I am not a FlowFuse team member

[joepavitt]

Hi @BlueSialia - can you share a screenshot of what you're seeing please? I'm not able to replicate

[BlueSialia]

Here you have it. I've included the HTML element of the Water Tank in the screenshot. Hope it helps.

Also I have a bunch of extensions installed in the browser. Out of all of them, the only ones that I believe can alter the HTML/CSS or block requests in this live Dashboard are uBlock Origin and Dark Reader. I disabled them to test this and the screenshot was taken with them disabled.

[BlueSialia]

Same behavior in Firefox with my Android phone.