Transition on overflowed elements prevents scroll

[johnleider]

Version

2.5.16

Reproduction link

https://codepen.io/johnjleider/pen/MVqyXB

Steps to reproduce

• Click the button to open the menu
• As the element is transitioning in, begin to scroll (try not to move your mouse while scrolling)

What is expected?

The scrollable area continues to scroll

What is actually happening?

The scrolling area will get stuck. The scrolling event is still being fired but is not actually scrolling the content. Once you move your mouse and start to scroll again, it works as expected.

If you wait for the transition to finish before scrolling, the bug does not present itself.

---

We had a report of the v-select component not scrolling. We have confirmed this is only happening in Chrome 65, but extends back to even 0.15 of the framework (Vuetify). I created the attached codepen to determine if it was framework specific or generally reproducible.

While their may be other css properties that trigger this issue, I have only had success with opacity and happens specifically with the enter declaration. If you remove the entry animation, this does not occur.

Removed entry animation https://codepen.io/johnjleider/pen/ZxMObZ?editors=1111

[posva]

I'm unable to reproduce it on OSX, are you sure this isn't just a browser bug? Could you try adding the classes manually without Vue?

[johnleider]

Here is an example without the transition system: https://codepen.io/johnjleider/pen/BrOzdV

As far as it being a Chrome bug, no idea.

edit: I'm on Windows 10. Can confirm other OSX users cannot reproduce either.

[blake-newman]

FYI: Linux with chrome is working for me

[blake-newman]

@johnleider assuming your commit fixes this issue, thus will close this ticket. Feel free to reopen, if the issue persists and is a vue core issue

[johnleider]

My commit does not fix this issue. I discovered this issue while debugging a Chrome 65 related bug with the contain css property in Vuetify.