diff --git a/docs/src/content/docs/resources/changelog.md b/docs/src/content/docs/resources/changelog.md index ecab9ad1f..44f4be54e 100644 --- a/docs/src/content/docs/resources/changelog.md +++ b/docs/src/content/docs/resources/changelog.md @@ -27,6 +27,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr - 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 d8562c7c4..d3f161dbb 100644 --- a/src/components/tab-group/tab-group.component.ts +++ b/src/components/tab-group/tab-group.component.ts @@ -337,8 +337,13 @@ export default class WaTabGroup extends WebAwesomeElement { 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; } }