Vuetify: [Bug Report] v-tooltip causes the visualization to freeze

[mclaran]

Versions and Environment

Vuetify: 1.0.0-beta.5
Vue: 2.5.0
Browsers: Chrome 64.0.3282.167
OS: Windows 7

Steps to reproduce

https://codepen.io/anon/pen/mXXwjz

Expected Behavior

No delay while scrolling, No additional render for "v-tooltip"

Actual Behavior

is each element using "v-tooltip", is being rendered in another element. This causes the visualization to freeze. If I remove all the "v-tooltip" from the markup, everything works smoothly.
https://user-images.githubusercontent.com/22270702/36366078-0f0f12f6-157f-11e8-8d1f-3f62994c73d6.png

Reproduction Link

https://codepen.io/anon/pen/mXXwjz

[johnleider]

I'm not sure if this is something we can get around, that is a lot of dynamically rendered tooltips. Thoughts @KaelWD ?

[mclaran]

I noticed such a feature that it occurs in all components using "slot='activator'". This checked for v-menu, dialog, v-tooltip

[KaelWD]

lazy is supposed to help with that, but doesn't seem to actually do anything for some reason.

[dmecke]

Maybe I am completely wrong, but... The mounted method of src/mixins/detachable.js reads !this.lazy && this.initDetach(). But when I look into the very same file in my projects node_modules directory (I am using 1.0.17) or in the very same file of the source zip download of 1.0.17, the line reads this.initDetach(). It seems that the bugfix #3593 somehow hasn't made it to the build!?

[KaelWD]

It'll be in 1.1 then, idk why that PR wasn't made to master. I'll have to check if that fixes this too.

[KaelWD]

Confirmed fixed by #3593 if you add lazy to the tooltips. That pen will still have terrible scrolling performance though unless you add backface-visibility: hidden to the scroll container.

Playground.vue

<template>
  <v-app id="inspire">
    <v-content>
      <v-container class="scroll-y"
                   style="max-height: 400px"
                   id="scroll-target">
        <v-layout column
                  align-center
                  justify-center
                  style="height: 1000px"
                  v-scroll:#scroll-target="onScroll">
          <table>
            <thead>
            <tr>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td>6</td>
              <td>7</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="i in items">
              <td v-for="item in 7">
                <v-tooltip lazy top color="black">
                  <v-btn flat icon color="primary" slot="activator">
                    <v-icon>add</v-icon>
                  </v-btn>
                  <span>item</span>
                </v-tooltip>
              </td>
            </tr>
            </tbody>
          </table>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    data: () => ({
      items: 20,
      offsetTop: 300
    }),

    methods: {
      onScroll(e) {
        const top = Number(e.target.scrollTop);
        const scr = this.offsetTop - top;
        if (scr < 0 ) {
          this.items += 20
          this.offsetTop += 300;
        }
      }
    }
  }
</script>

<style lang="stylus">
  .scroll-y {
    backface-visibility: hidden
  }

  table {
    width: 100%;
    border-collapse: collapse;

    td {
      border: 1px solid #dcdcdc;
      padding : 5px;
      text-align: center;
    }
  }
</style>