Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta Adatta ai principianti
  • Qualcosa non va?
#36,945 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@jakesalvesen ci sta già lavorando.

Dal 20/10/2026.

  • #36946 di @jakesalvesen — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
74/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
css, react, typescript
Ambito
frontend

Direzione di ricerca

Inizia dal file degli stili di Slider useSliderStyles.styles.ts e analizza la suddivisione degli stili vertical e di @supports descritta nell’issue. Rimuovi il fallback deprecato oppure usa le dichiarazioni standardizzate in quel ramo. Poi verifica che uno Slider verticale venga visualizzato senza l’avviso di Chromium e mantenga il layout verticale.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.
Lingua principale
TypeScript
Stelle
20.3k
Fork
2.9k
Merge medio
2g 6h
PR unite (30g)
72

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

  • Nessun Dockerfile né file Docker Compose
  • Ha un modello di pull request
  • Nessuna guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/fluentui

Tutte le issue di microsoft/fluentui

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.