Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#36,945 1 comment 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@jakesalvesen is already working on this.

Since Oct 20, 2026.

  • #36946 by @jakesalvesen — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
74/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, react, typescript
Domain
frontend

Research direction

Start in the Slider styles file useSliderStyles.styles.ts and inspect the vertical styles and the @supports split described in the issue. Remove the deprecated fallback or use the standardized declarations in that branch, then verify a vertical Slider renders without the Chromium warning and retains its vertical layout.

Written by the indexing model from the issue text.

Description

Fluent UI react-components (v9) Needs: Triage :mag: Type: Bug :bug:
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.
Dominant language
TypeScript
Stars
20.3k
Forks
2.9k
Avg merge
2d 6h
Merged PRs (30d)
72

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

  • No Dockerfile or Docker Compose file
  • Has a pull request template
  • No contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from microsoft/fluentui

All issues in microsoft/fluentui

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.