Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở Phù hợp với người mới
  • Có gì không ổn?
#36,945 1 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@jakesalvesen đang làm issue này rồi.

Từ ngày 20/10/2026.

  • #36946 của @jakesalvesen — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
74/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
css, react, typescript
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu từ tệp kiểu dáng của Slider useSliderStyles.styles.ts và kiểm tra phần tách các kiểu dáng vertical và @supports được mô tả trong issue. Xóa phương án dự phòng đã lỗi thời hoặc dùng các khai báo đã được chuẩn hóa trong nhánh đó. Sau đó, xác minh rằng Slider dọc được hiển thị mà không có cảnh báo Chromium và vẫn giữ bố cục dọc.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
20.3k
Fork
2.9k
Merge trung bình
2 ngày 7 giờ
Pull request đã merge (30 ngày)
69

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/fluentui

Tất cả issue của microsoft/fluentui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.