[Bug Report] bug with tabs slider

[smaimOK]

Environment

Vuetify Version: 2.4.5
Vue Version: 2.6.11
Browsers: Chrome 89.0.4389.72
OS: Windows 10

Steps to reproduce

found a problem on my site. Long haunted me, I thought the problem was in my project. The problem is this: when you the scoroll on the tabs. at some point when you cash in on the arrow, it does not behave correctly, it will hide it back and forth.
https://vuetifyjs.com/en/components/tabs/#align-with-title - here is also a problem
Then I found the same problem on your site. Click the arrows. You will see the problem.
I hope you can understand me. really looking forward to your reply.
my mail: serepuga102@gmail.com

Expected Behavior

the scroll worked well

Actual Behavior

bug

Reproduction Link

https://codesandbox.io/s/rj75pm5o1q?from-embed=&file=/src/components/TabsRow.vue:223-229

[elioschmutz]

The Bug can be reproduced as following:

Markup:

<template>
  <v-container>
    <v-tabs>
      <v-tab>Item One</v-tab>
      <v-tab>Item Two</v-tab>
      <v-tab>Item Three</v-tab>
    </v-tabs>
  </v-container>
</template>

<script>
export default {
  name: "App",
};
</script>
<style lang="scss">
.v-tabs {
  padding-left: 14px;
  .v-tabs-bar {
    padding-left: 16px;
  }
}
</style>

Steps

• Visit the Site with the markup above with Chrome
• Set the Zoom to 110%
• Resize the window

Sanbox to reproduce

https://codesandbox.io/s/hardcore-currying-ihcr8?file=/src/App.vue

Explanation

The bug seems to be in the VSlideGroup component of vuetify in the setWidths method.

It seems to be a rounding issue in Chrome only when calculating the clientWidth. The wrapper and the content width are different by 1px in some cases, even if they're equal. Here's an example with a console.log within the setWidths method of the VSlideGroup to show what happens while the bug is taking effect:

Bildschirmvideo.aufnehmen.2021-03-17.um.09.44.05.mov

The setWidths methods will be called in an endless loop triggered by the isOverflowing watcher which I can demonstrate with the following screen which logs where the setWidths gets called:

In the best case, the tabs are just jumping around. In the worst case, the vue-app will fully freeze.

And here you can see the widths printed always if the setWidths method was called. You can see the difference of 1px every second time it gets called. That's the reason, why it's flickering around if the bug is taking effect:

[smaimOK]

Thank you so much. Also, scrolling does not work correctly. What can we think of?