Vuetify: [Bug Report] v-tabs causing unexpected screen scroll

Created on 30 Apr 2019 · 12Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.108
OS: Mac OS 10.14.4

Steps to reproduce

On Chrome 74 change tabs back and forth and observe occasional changes in browser window scroll position.

Expected Behavior

When changing tabs, it's expected that the scroll position, relative to the top of the screen, should not change.

Actual Behavior

In some instances, the scroll position of the window can change when moving between tabs.

Reproduction Link

https://codepen.io/MatthewAry/pen/LvoWaB

Other comments

I have observed this in my own code.

video:
https://drive.google.com/open?id=1_D3FOaznuZ9zUN-uKtk86J0zPzhdFqww

Possible related issue: #5582

VTabs bug help wanted

Source

MatthewAry

👍4

Most helpful comment

I could find a fix. If you add a height style like this style="height: 500px;" to <v-tabs>, the problem goes away.

bobk93 on 4 Jul 2019

👍2

All 12 comments

for me, every page, all of them, are scrolling all the way to the bottom upon loading completely. very annoying, disabling the extension stops the behavior and ive tried using it by itself same result

Ae3NerdGod on 6 May 2019

After playing with this for several hours, I'm at a bit of a loss. It works correctly in Firefox and IE11 but not Edge/Chrome. This issue occurs as part of the baseline v-window and any solutions would occur there. Any help is appreciated.

johnleider on 24 Jun 2019

any progressions?

beratuslu on 27 Jun 2019

I could find a fix. If you add a height style like this style="height: 500px;" to <v-tabs>, the problem goes away.

bobk93 on 4 Jul 2019

👍2

If you wrap the v-tabs in a div with style="overflow:hidden" the animation still bugs out but at least it doesn't go out of the container which is the worst part of the bug.

jbayona89 on 5 Aug 2019

Vuetify v2.0.12 may have fixed this issue via #8205
All those who have been affected by this issue and have been watching, please update your vuetify package and message here if you can still observe this issue or if it has been resolved.

MatthewAry on 3 Sep 2019

@MatthewAry For those us of who are running Chrome, but are _not_ running any Vuetify package (eg: not installed nor present on the entire host), what would you propose the fix to be?

desrod on 30 Sep 2019

I'm thinking the fix might be #8205 and I'm asking the community to check if they can confirm.

MatthewAry on 30 Sep 2019

Not likely that #8205 is the cause of this, since Chrome, vTabs and Vuetify are completely separate projects from one another, and don't appear to share any code in any way. Or are you suggesting vTabs should include and incorporate Vuetify in its own extension codebase, to mitigate this issue?

desrod on 30 Sep 2019

@desrod I'm not sure you're going to get what you want here. Also I think your contributions to this conversation are off topic. Chrome executes the code from Vuetify and Vuetify has vTabs as part of its component library. Chrome and Vuetify may not share code, but Vuetify depends on Chrome to do its job correctly because that's where Vuetify's code runs.

This is a Vuetify issue, and if the issue is exclusive to Chrome then it can still be a vuetify issue. #8205 fixes a race condition in VWindow which is used by VTabs and race conditions can manifest themselves as bugs in different ways depending on the execution environment. A lot of bugs were fixed with #8205. In Chrome, this can seem more apparent than it does in FireFox, but it might still have the same behavior in Safari which uses webkit, which Google Chrome's Blink rendering engine is a fork of.

If you are having problems with another package with similar undesirable behavior, and if you are convinced that the issue is a problem in Chrome, then you will need to file a bug report here https://bugs.chromium.org/p/chromium/issues/list

I have no recommendations for you or suggestions about how to address your own issue. I'm not a developer for Vuetify, and I can't speculate as to what your problems are or what you would need to do to fix them.

If you are not using Vuetify, then you should look elsewhere for help like Stack Overflow.

MatthewAry on 30 Sep 2019

Easy way to verify if #8205 resolves this would be to make an updated codepen with your issue using 2.0.x and see if it still exists, in which case it doesn't, and it has been resolved in 2.0, then its just a matter of back-porting the fix.

@desrod If you are having an issue outside the realm of vuetify, then certainly as @MatthewAry says, submit something to chrome, as this issue is in regards to vuetify`v-tab` and this issue board is for bugs related to vuetify.