Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#36,945 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@jakesalvesen ya está trabajando en esto.

Desde el 20/10/2026.

  • #36946 de @jakesalvesen — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
74/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
css, react, typescript
Área
frontend

Línea de trabajo

Empieza en el archivo de estilos de Slider useSliderStyles.styles.ts e inspecciona la separación de estilos de vertical y @supports descrita en el issue. Elimina la alternativa obsoleta o utiliza las declaraciones estandarizadas en esa rama. Después, verifica que un Slider vertical se renderice sin la advertencia de Chromium y conserve su disposición vertical.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.
Lenguaje dominante
TypeScript
Estrellas
20.3k
Forks
2.9k
Merge medio
2 d 7 h
PR fusionados (30 d)
69

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de microsoft/fluentui

Todos los issues de microsoft/fluentui

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.