From e1102ba9cfb66020062261685464b39d7c01832e Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Tue, 20 Feb 2024 14:58:11 -0500 Subject: [PATCH] prevent tab group safari twitch; fixes #1839 --- docs/pages/resources/changelog.md | 1 + src/components/tab-group/tab-group.component.ts | 7 ++++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md index a0b0a8bf..95bb6a87 100644 --- a/docs/pages/resources/changelog.md +++ b/docs/pages/resources/changelog.md @@ -18,6 +18,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti - Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] - Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] - Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] +- Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] ## 2.14.0 diff --git a/src/components/tab-group/tab-group.component.ts b/src/components/tab-group/tab-group.component.ts index 5b592044..28607628 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -338,8 +338,13 @@ export default class SlTabGroup extends ShoelaceElement { if (this.noScrollControls) { this.hasScrollControls = false; } else { + // In most cases, we can compare scrollWidth to clientWidth to determine if scroll controls should show. However, + // Safari appears to calculate this incorrectly when zoomed at 110%, causing the controls to toggle indefinitely. + // Adding a single pixel to the comparison seems to resolve it. + // + // See https://github.com/shoelace-style/shoelace/issues/1839 this.hasScrollControls = - ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth; + ['top', 'bottom'].includes(this.placement) && this.nav.scrollWidth > this.nav.clientWidth + 1; } }