Styling of Shaka Seek Bar is based on browser default value content-box for box-sizing since v4.15 UI overhaul

[loicraux]

Have you read the FAQ and checked for duplicate open issues?
Yes

If the problem is related to FairPlay, have you read the tutorial?
N/A

What version of Shaka Player are you using?
Latest version 4.15.4

Can you reproduce the issue with our latest release version?
Yes

Can you reproduce the issue with the latest code from main?
Yes

Are you using the demo app or your own custom app?
Both

If custom app, can you reproduce the issue using our demo app?
Yes

What browser and OS are you using?
N/A

For embedded devices (smart TVs, etc.), what model and firmware version are you using?
N/A

What are the manifest and license server URIs?
Not related to DRM.

What configuration are you using? What is the output of player.getNonDefaultConfiguration()?
Default configuration

What did you do?
This "universal box-sizing" rule is now considered a best practice in modern CSS and is used by nearly all CSS frameworks (Bootstrap, Tailwind, etc.) :

/* Best practice: apply to all elements */
*, *::before, *::after {
  box-sizing: border-box;
}

I have such as CSS reset rule in my app.

What did you expect to happen?

I would expect the seek bar to correctly appears when the player controls are hovered or when the video is paused, when such a CSS reset is used.

What actually happened?
The seek bar track does not appear anymore after the v4.15 UI overhaul, only the thumb appears...

Explanations/Analysis

This is not reproducible on Shaka Player demo since the CSS code to style the seek bar is based on the browser default value content-box for box-sizing. Once you have a CSS reset stylesheet in your project, the seek bar is broken.

The simple fix is to explicitely set box-sizing to content-box for the shaka player seek bar.

Notes :

• There might be similar issues elsewhere in the CSS code...
• It could be a good idea to improve the demo site so that common CSS resets can be applied and see how the player UI behaves...

Are you planning to send a PR to fix it?
I can submit a PR for this, yes.

[avelad]

Please send a PR for this.

[avelad]

@loicraux Does this work for you? If so, I can create a PR with this:

diff --git a/ui/less/range_elements.less b/ui/less/range_elements.less
index b6c6e876d..bdf37a852 100644
--- a/ui/less/range_elements.less
+++ b/ui/less/range_elements.less
@@ -49,6 +49,9 @@
 
   /* Until we set a gradient background in JS, this will be the track color. */
   background: @track-default-color;
+
+  /* Override box-sizing to avoid other box-sizing rules break this element */
+  box-sizing: content-box;
 }
 
 /* The "track" is the pseudo-element inside the range element which represents