backport 1839

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 `<sl-rating>` that caused the rating to not reset in some circumstances [#1877]
 - Fixed a bug in `<sl-select>` that caused the menu to not close when rendered in a shadow root [#1878]
 - Fixed a bug in `<sl-tree>` that caused a new stacking context resulting in tooltips being clipped [#1709]
+- Fixed a bug in `<sl-tab-group>` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839]
 
 ## 2.14.0
 

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;
     }
   }