"Red component" when volume bar is closing

[rtritto]

Describe the bug

When the volume bar is closing, a "red component" is displayed near the end of volume bar.

Steps to reproduce

1. Register the volume-bar plugin
2. Move the cursor over the volume icon and wait the volume bar is displayed
3. Remove the cursor from the volume bar
4. At the end of volume bar, see on top a "red component"

Expected behavior

No "red component" appear when the volume bar is closing

Screenshots and recordings

2025-02-17.221506.mp4

Vlite.js

7.0.0

Browser

Firefox 135

OS

Windows 11

Additional context

No response

[yoriiis]

Thank you @rtritto for the issue problem. Would you like to try and solve it?

[rtritto]

The issue should be on transition of

vlite/src/plugins/volume-bar/volume-bar.css

Lines 8 to 18 in 2d8cc06

	&-volumeBar {
	transition: width var(--vlite-transition), margin var(--vlite-transition);
	overflow: hidden;
	width: 0;
	height: 25px;
	&:focus-visible {
	width: 52px;
	margin-right: 10px;
	}
	}

Do you have any idea to fix?

[rtritto]

This issue should be in the CSS of v-progressBarStyle class in the input element.
To see the volume bar point (thumb) and test the related CSS, disable/remove overflow: hidden from v-volumeBar class in the input element.

[yoriiis]

It seems related to the input type range element, I don't reproduce the problem on Chrome but in Firefox I see the problem.

I tested quickly but I didn't find a fix, it would be necessary to investigate, but it's quite minimal as a bug and I'm not very available

[rtritto]

We can use same implementation of video.js. Demo: https://videojs.com/advanced/?video=disneys-oceans

[yoriiis]

We can use same implementation of video.js. Demo: https://videojs.com/advanced/?video=disneys-oceans

The Video.js implementation is different and I find the Vlitejs one better, it uses the native hover state in CSS and a range type input (it's inspired by Youtube).

I think a CSS fix might be possible, something like white-space: nowrap or flex-wrap: nowrap but I haven't managed it quickly.