md-app-toolbar: Fixed + animated toolbar bounces when scrolling with mouse wheel

[dreusel]

When scrolling content by mouse wheel any of the fixed + animated (reveal, flexible, Navigation fixed, ...) version app toolbar is bouncing (de-attaching and re-attaching) against the top of the screen. This can be observed on the documentation pages: https://vuematerial.io/components/app I'm seeing this both in Chrome (72.0.3626.121) and Firefox (65.0.1) running Ubuntu 18.10 Similar behavior can be seen in many other widget toolkits, but not for example in https://www.webcomponents.org/element/@polymer/app-layout/elements/app-header

Steps to reproduce

Browse to https://vuematerial.io/components/app , scroll any of the Reveal/Flexible/Navigation fixed/Overlapping content toolbar examples by using the mouse wheel.

Which browser?

Browser: Chrome (72.0.3626.121) and Firefox (65.0.1) on Ubuntu 18.10 Vue + Vue Material: the one currently (14-03-2019) used in the documentation website

What is expected?

The toolbar to stay static, attached to the top of the screen, giving a smooth scrolling experience.

What is actually happening?

The toolbar bounces against the top of the screen, showing gaps, when scrolling by mouse wheel. This gives a distracting, jerky scrolling experience.

Reproduction Link

https://vuematerial.io/components/app

[rille111]

I see the same thing, it is a very weird behaviour and confuses the user. I hope this gets fixed..

[YoungMayor]

Same issue encountered here. Kinda frustrating