[Bug]: Vertical Slider still logs the deprecated 'slider-vertical' warning in Chromium 132+

从 Slider 样式文件 useSliderStyles.styles.ts 开始，检查 issue 中描述的 vertical 样式和 @supports 分支。移除已弃用的回退方案，或在该分支中使用标准化声明。然后验证垂直 Slider 能够在没有 Chromium 警告的情况下渲染，并保持垂直布局。

Component

Slider

Package version

@fluentui/[email protected] (@fluentui/[email protected], the current release)

React version

19.3.1

Environment

System:
  OS: Windows 11 10.0.26300
  CPU: (24) x64 AMD Ryzen 9 7900X 12-Core Processor
  Memory: 13.83 GB / 31.16 GB
Browsers:
  Chrome: 155.0.8059.85
  Edge: Chromium (4.1)
npmPackages:
  @fluentui/react-components: 9.74.10 => 9.74.10
  @fluentui/react-slider: 9.6.7 => 9.6.7
  react: 19.3.1 => 19.3.1
  react-dom: 19.3.1 => 19.3.1
  @types/react: 19.3.0 => 19.3.0
  @types/react-dom: 19.3.0 => 19.3.0

Current Behavior

Rendering Slider vertical from the current release still logs the deprecation warning in every app that mounts a vertical slider:

[Deprecation] The keyword 'slider-vertical' specified to an 'appearance' property is not standardized. It will be removed in the future. Use <input type=range style="writing-mode: vertical-lr; direction: rtl"> instead.

useSliderStyles.styles.ts emits the value in the unsupported branch of a sideways-lr probe:

'@supports (writing-mode: sideways-lr)': { writingMode: 'vertical-lr', direction: 'rtl' },
'@supports not (writing-mode: sideways-lr)': { WebkitAppearance: 'slider-vertical' },

#34022 added that probe to fix #33944, which is correct for browsers without sideways-lr. Chromium 132 added sideways-lr, so in current Chromium the second block never matches and the vertical slider is styled by the first branch. The declaration is dead, but Chromium still reports it while parsing the CSS: the warning fires even though the @supports condition is false, and even when the selector matches no element.

Measured on Chrome 155.0.8059.85 (Windows 11):

• CSS.supports('writing-mode', 'sideways-lr') is true, so the fallback block does not apply.
• @supports not (writing-mode: sideways-lr) { .a { -webkit-appearance: slider-vertical } } with no matching element still logs the deprecation.
• The same rule injected at runtime with CSSStyleSheet.insertRule, which is how Griffel inserts it, logs the warning too.
• .b { writing-mode: vertical-lr; direction: rtl } renders a vertical range input (16 x 129 px for a default input) with no warning.

This is a follow-up to #33944 and #34022: the case where the fallback actually applied is fixed, and the remaining warning only appears once a browser supports sideways-lr.

Expected Behavior

The vertical Slider should render without logging the deprecation warning. The warning's own recommendation is writing-mode: vertical-lr; direction: rtl, and vertically oriented form controls have supported it since Chrome 124, Firefox 120 and Safari 17.4, so the sideways-lr probe no longer needs a deprecated fallback:

vertical: {
  height: '100%',
  width: `var(${sliderThumbSizeVar})`,
  writingMode: 'vertical-lr',
  direction: 'rtl',
},

Dropping the @supports split is behaviour-identical in every browser that supports sideways-lr (Chromium 132+, Firefox 43+, Safari 18.4+), because those browsers already take the first branch. Browsers that support vertical form controls but not sideways-lr (Chrome 124-131, Safari 17.4-18.3) currently get the deprecated native appearance and would get the standardized one instead. Only browsers older than Chrome 124, Firefox 120 and Safari 17.4 lose the legacy native vertical appearance, which the removal of the keyword forces eventually anyway.

If a fallback branch should stay, mirroring the standardized declarations into the @supports not (writing-mode: sideways-lr) block also silences the warning, because the deprecated value is the only thing Chromium reports.

Version data is from MDN browser-compat-data: writing-mode: sideways-lr and the vertically oriented form controls note in css/properties/writing-mode.json.

Reproduction

https://gist.github.com/jakesalvesen/0a6871b1c7c59da40fd0cfbc77d75ad7 - a standalone HTML page that renders the exact rule @fluentui/react-slider emits next to the recommended declarations, and prints the support and layout measurements on the page.

Steps to reproduce

1. Render Slider vertical from @fluentui/react-components in Chrome 132 or newer, for example <div style={{ height: 200 }}><Slider vertical /></div>.
2. Open DevTools and load the page: the deprecation warning for slider-vertical is logged once, even though the vertical slider is rendered by writing-mode: vertical-lr.
3. Save the attached gist page and open it in the same browser. Case A is the rule the package emits, Case B is the recommended declarations. DevTools logs the warning for Case A only, and the page prints CSS.supports('writing-mode', 'sideways-lr') as true, so Case A never applies.
4. Delete the -webkit-appearance: slider-vertical declaration (or move the standardized declarations into the unsupported branch): the warning is gone and the vertical slider is unchanged.

Are you reporting an Accessibility issue?

no

Suggested severity

Low - Has or doesn't need a workaround

Products/sites affected

Internal Power Apps code app that renders vertical Sliders in a filter panel

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.