about volume location not at centre at controlBar: {volumePanel: {inline: false}}, at 8.0.3 in chinese

[R8KwEwN2hvrhY]

Description

volume location not at centre at controlBar: {volumePanel: {inline: false}}, at 8.0.3 in chinese

Uploading test.txt…

Reduced test case

No response

Steps to reproduce

1.play video in chinese system and explorer
2.
3.

Errors

No response

What version of Video.js are you using?

8.0.3

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

chrome 109 zh-cn

What OS(es) and version(s) does this occur with?

windows11

[mister-ben]

It probably needs this to be changed to line height as was done for the horizontal bar in #7990

video.js/src/css/components/_volume.scss

Line 133 in 509b3d0

left: -0.3em;

Would you be able to test that?

[R8KwEwN2hvrhY]

It probably needs this to be changed to line height as was done for the horizontal bar in #7990

video.js/src/css/components/_volume.scss

Line 133 in 509b3d0

left: -0.3em;

Would you be able to test that?

i don't know how to do this way.you can provide js command change that,let me try it...use up test.html file

[mister-ben]

Manually changing styles on the element in developer tools is probably the easiest way to work it out. I had a try with Chrome Canary in Chinese, but I haven’t found a value that works for both Chinese and non-Chinese browsers.

[gkatsev]

Manually changing styles on the element in developer tools is probably the easiest way to work it out. I had a try with Chrome Canary in Chinese, but I haven’t found a value that works for both Chinese and non-Chinese browsers.

@mister-ben what about targeting css based on locale like we do for the subscaps button?

[mister-ben]

No, we can't target it with :lang() because it's not the language of the page or part of the DOM, or the user language preferences that matter; it's the language the browser is runnning in. I can replicate only by running Chrome in Chinese. It's weird.

[mister-ben]

I see the reason it's different now. If Chrome is running in Chinese, it sets the minimum font size to 12px, (in preferences > appearance > customise font). In other languages it's unset. Our CSS sets the slider handle to .9em, which we expect to be 9px, but on the Chinese browser it's 12px becuase of that min value.

[R8KwEwN2hvrhY]

I see the reason it's different now. If Chrome is running in Chinese, it sets the minimum font size to 12px, (in preferences > appearance > customise font). In other languages it's unset. Our CSS sets the slider handle to .9em, which we expect to be 9px, but on the Chinese browser it's 12px becuase of that min value.

i found that at firefox 109 horizontal button has a litle upward,just like follow image