When using the ElegantFin theme on the PC Web Client or Jellyfin Media Player (JMP), hovering the mouse over the video progress bar shows an incorrect time tooltip/preview. The time displayed does not match the actual physical position of the mouse cursor on the timeline. The visual drift usually gets worse as you move the cursor further to the right.
The issue completely disappears if I remove the ElegantFin custom CSS from the server dashboard. It also works perfectly on mobile apps (Android), confirming it is an issue with the web wrapper's CSS altering the player's bounding box.
Steps to reproduce the behavior:
Apply the ElegantFin base CSS and the media-bar-plugin-support-latest-min.css add-on in the Jellyfin Dashboard.
Open the Jellyfin Web Client or JMP on a desktop PC.
Play any movie or show.
Hover the mouse cursor over the video progress bar.
Notice that the time shown in the tooltip is misaligned with the mouse pointer.
Expected behavior
The hover tooltip time and preview image should perfectly align exactly where the mouse cursor is located on the progress bar.
Technical Details & Potential Cause
It seems the custom margins, paddings, or width modifications applied to .mdl-slider, .sliderContainer, or .videoOsd (specifically from the media bar support addon) are breaking the JavaScript math. The browser's getBoundingClientRect() fails to calculate the correct X-coordinates for the mouse because the interactive area is no longer matching the visual styled bar.
Environment:
Server: Jellyfin running on Docker
Client: Web Browser / Jellyfin Media Player (JMP)
OS: Windows PC (i9-9900K / RTX 3060 Ti)
Resolution/Scaling: 100% scaling, 100% browser zoom (discarded as the cause)
When using the ElegantFin theme on the PC Web Client or Jellyfin Media Player (JMP), hovering the mouse over the video progress bar shows an incorrect time tooltip/preview. The time displayed does not match the actual physical position of the mouse cursor on the timeline. The visual drift usually gets worse as you move the cursor further to the right.
The issue completely disappears if I remove the ElegantFin custom CSS from the server dashboard. It also works perfectly on mobile apps (Android), confirming it is an issue with the web wrapper's CSS altering the player's bounding box.
Steps to reproduce the behavior:
Apply the ElegantFin base CSS and the media-bar-plugin-support-latest-min.css add-on in the Jellyfin Dashboard.
Open the Jellyfin Web Client or JMP on a desktop PC.
Play any movie or show.
Hover the mouse cursor over the video progress bar.
Notice that the time shown in the tooltip is misaligned with the mouse pointer.
Expected behavior
The hover tooltip time and preview image should perfectly align exactly where the mouse cursor is located on the progress bar.
Technical Details & Potential Cause
It seems the custom margins, paddings, or width modifications applied to .mdl-slider, .sliderContainer, or .videoOsd (specifically from the media bar support addon) are breaking the JavaScript math. The browser's getBoundingClientRect() fails to calculate the correct X-coordinates for the mouse because the interactive area is no longer matching the visual styled bar.
Environment:
Server: Jellyfin running on Docker
Client: Web Browser / Jellyfin Media Player (JMP)
OS: Windows PC (i9-9900K / RTX 3060 Ti)
Resolution/Scaling: 100% scaling, 100% browser zoom (discarded as the cause)