Vuetify: [Bug Report] hide-on-scroll on Safari => works the reverse way

[guillim]

Environment

Vuetify Version: 2.2.0-beta.0
Vue Version: 2.6.10
Browsers: Safari
OS: Mac OS 10.15.0

Steps to reproduce

1 - Open Safari
2 - Go to the official documentation Playground
3 - Select Hide-on-scroll
4 - Scroll to the bottom and observe

Expected Behavior

We expect the documentation behavior: _Hides the app-bar when scrolling. Will still show the extension slot._

Actual Behavior

works the other way around:

• scrolling at the bottom, app-bar appears
• scrolling at the top, app-bar disappears

Reproduction Link

https://codepen.io/guillim/full/qBEqwKB

Other comments

it is a problem since the behavior is opposite to other browsers

[KaelWD]

Unable to reproduce in safari 13 on Catalina

[guillim]

Thanks for your help @KaelWD

I just updated the CodePen to make it even more straightforward.

Here is what I have on CodePen when I use Safari (version 13.0.2)

Here is what I have on CodePen when I use Chrome

Don't you have this on your side?

[KaelWD]

Nope, the toolbar is shown at first then hides when I scroll down. This is in browserstack though so maybe it's different on an actual mac. Can you make sure you don't have any extensions enabled?

[guillim]

Nope, the toolbar is shown at first then hides when I scroll down. This is in browserstack though so maybe it's different on an actual mac. Can you make sure you don't have any extensions enabled?

There are no extension installed on my Safari browser on my mac (Catalina 10.15)

I can't access BrowserStack since it's a paid option for my configuration, there may be a bug with it for the reproduction

[CodeSkills]

I tested this on Mac OS Catalina on Macbook all updated to latest. The navbar is visible on load but when I try to scroll up and down, in Safari it stops working after 3-5 up/down scrolls and the navbar never shows up

[KaelWD]

@CodeSkills what styles are being applied when it's broken?

[CodeSkills]

This one is when im on the top and its bugged -> not visible

If I try to scroll more top (like over the limit of 0) it changes to this

But it instantly goes back to the first image and disappears when I stop scrolling.

[johnleider]

@KaelWD Are you still requesting information? If so, this issue should be closed.

[johnleider]

This issue is being closed due to:

• [ ] Reproduction environment not provided (inactivity for 14 days)
• [x] Requested information not provided (inactivity for 14 days)
• [ ] Violation of the Code of Conduct

[KaelWD]

Are you still requesting information?

No.

[guillim]

Anyone has some updates on this topic?

[guilhermewaess]

@guillim I'm also waiting for some update here.

[matthieusieben]

I believe that the issue is linked to VAppBar's thresholdMet() behavior when it is triggered more than once with the same currentScroll (because of repeated scroll events, and canScroll watcher).

My current workaround is here bellow. Note that both setting scroll-threshold and the onScroll handler are important

<template>
  <v-app v-scroll="onScroll">
    <v-app-bar
      ref="appBar"
      app
      hide-on-scroll
      :scroll-threshold="50"
    >
      <!-- content -->
    </v-app-bar>
    <v-content>
      <!-- content -->
    </v-content>
  </v-app>
</template>

<script>
import { Scroll } from 'vuetify/lib/directives/scroll'

export default {
  directives: {
    Scroll,
  },
  methods: {
    onScroll() {
      // @hack: https://github.com/vuetifyjs/vuetify/issues/9993
      const { appBar } = this.$refs
      if (appBar.currentScroll < appBar.currentThreshold) {
        appBar.isActive = true
      }
    },
  }
}


</script>

[matthieusieben]

Adding the following watchers to VAppBar yield some strange results:

    computedScrollThreshold: {
      handler(val) {
        console.error('computedScrollThreshold', val) // -9 (!!!!!)
      },
      immediate: true,
    },
    scrollThreshold: {
      handler(val) {
        console.error('scrollThreshold', val) // => undefined
      },
      immediate: true,
    },

Note that I am using this with NuxtJS with SSR (i see the -9 value both in server & client logs)

[marcgibbons]

As a workaround, I've created a new component by extending VAppBar and overriding the thresholdMet() method with this:

// ...
if (this.hideOnScroll) {
  // this.isActive = this.isScrollingUp
  this.isActive = (
    this.isScrollingUp 
    || this.currentScroll < this.computedScrollThreshold
  );
}

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VAppBar/VAppBar.ts#L262

Seems to reliably prevents the app bar from hiding when scrolling into negative territory on iOS Safari.