Timeline: Render issues when zooming

[PeterSR]

I am not sure if this is a problem with upstream or if Vue messes with vis.js somehow, but I am seeing the follow problem when adding a single item and zooming out:

https://user-images.githubusercontent.com/222286/129437542-80c78f8c-d7c5-41f6-a68e-e7db14116e52.mp4

I simply drag the item, positioned at 2021-06-01, into view and then start scrolling out using the mouse wheel.

A similar issue was reported here: https://forum.vuejs.org/t/visjs-timelime-rendering-issues/28180

---

Here is the MWE:

App.vue:

<template>
  <div id="app">
    <timeline :items="items" :options="options"></timeline>
  </div>
</template>

<script>

export default {
  name: "App",
  data() {
    return {
      items: [
        {
          id: 0,
          content: "Test",
          start: "2021-06-01"
        }
      ],
      options: {},
    };
  },
};
</script>

<style></style>

main.js:

import Vue from 'vue'
import App from './App.vue'

import { Timeline } from 'vue-visjs'

Vue.component('timeline', Timeline)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Packages:

"vue": "^2.6.11",
"vue-visjs": "^0.6.0"

---

Note: I have tried to implement my own rudimentary Timeline component as well and I actually saw a similar problem. I wonder if Vue is somehow messing with some internals of vis.js Timeline that makes it zoom on a different scale.

Note: As mentioned the "Test" item should be positioned at 2021-06-01, but as shown in the video, even before zooming it is actually misplaced visually.

[PeterSR]

To help investigation I have created https://github.com/PeterSR/debug-vue-visjs.

Already now I can tell that it does not seem to be a problem with vue-visjs but rather just the presence of Vue.

[sjmallon]

It took a while, but the culprit is in the styles set by the vue demo app, specifically the text-align: center set on #app. Remove this and the problem goes away. The upstream vis internals are complex so I don't have time to investigate quite why this behaviour occurs, but at least there's a fix with no real downside.

Thanks for raising.

[PeterSR]

@sjmallon Thank you for looking in to this and finding a fix!