visjs
Incorrect rendering and zooming in Vue context
I have tried to create a timeline with a single item "Test" placed at 2021-06-01 in a Vue app. When rendering and zooming out, it looks like this:
https://user-images.githubusercontent.com/222286/129437542-80c78f8c-d7c5-41f6-a68e-e7db14116e52.mp4
I have created a sample repo where I reproduce the bug. I tried to make sure that the reactivity of Vue does not affect the Timeline object. The repo also includes a pure Webpack version where the bug is not present.
https://github.com/PeterSR/debug-vue-visjs
I previously thought it was a problem with the package vue-visjs and have created an issue here, but I believe the problem is not limited to vue-visjs.
I am using Firefox 90 on Linux. I am running Node v10.19.0.
Specifically for the vue-visjs situation, @sjmallon wrote this here:
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.
Perhaps this can help with the investigation.
