From 18a8a492f89fc6987a03a2ce0092257024142e72 Mon Sep 17 00:00:00 2001 From: Bartosz-Do Date: Thu, 24 Sep 2026 15:27:46 +0200 Subject: [PATCH] Fix `.dropdown-menu-arrow` border rendering on Firefox (#3162) --- .changeset/dropdown-menu-arrow-firefox.md | 5 +++++ core/scss/ui/_dropdowns.scss | 3 +++ 2 files changed, 8 insertions(+) create mode 100644 .changeset/dropdown-menu-arrow-firefox.md diff --git a/.changeset/dropdown-menu-arrow-firefox.md b/.changeset/dropdown-menu-arrow-firefox.md new file mode 100644 index 000000000..3a78a56e0 --- /dev/null +++ b/.changeset/dropdown-menu-arrow-firefox.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Fixed `.dropdown-menu-arrow` border rendering on Firefox by trimming the clipped edges. diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss index fecc19c8f..5ee8e370f 100644 --- a/core/scss/ui/_dropdowns.scss +++ b/core/scss/ui/_dropdowns.scss @@ -93,6 +93,9 @@ // The menu draws its edge with the 1px ring in --dropdown-box-shadow and has // no border, so `inherit` would give the arrow the text color. border: 1px solid var(--dropdown-border-color); + // clip-path + border + rotate renders garbled edges on Firefox; only the + // top/left border survives the clip anyway, so drop the rest. + border-width: 1px 0 0 1px; /* rtl:ignore */ transform: rotate(45deg);