Template coloring breaks when the same file is open in multiple tabs and scrolled to different positions

[ascott18]

Vue - Official extension or vue-tsc version

2.1.10

VSCode version

1.95.3

Vue version

3.5.13

TypeScript version

5.6.3

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 8.02 GB / 31.94 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.6.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.12.1 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355

package.json dependencies

"dependencies": {
    "date-fns": "^3.0.0",
    "date-fns-tz": "^3.0.0",
    "tslib": "^2.6.2"
  },
  "peerDependencies": {
    "coalesce-vue": "../coalesce-vue",
    "vue": "^3.4.0",
    "vuetify": "^3.7.1"
  },
  "optionalDependencies": {
    "vue-router": "^4.4.1"
  },
  "devDependencies": {
    "@types/node": "^20.14.11",
    "@vitejs/plugin-vue": "5.0.2",
    "@vitejs/plugin-vue-jsx": "3.1.0",
    "@vitest/coverage-v8": "^2.0.3",
    "@vue/eslint-config-typescript": "^13.0.0",
    "@vue/test-utils": "~2.4.6",
    "autoprefixer": "^10.4.8",
    "axios": "^1.3.4",
    "coalesce-vue": "../coalesce-vue",
    "eslint": "^8.0.0",
    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.1",
    "sass": "^1.69.7",
    "typescript": "5.6.2",
    "unplugin-vue-components": "^0.27.4",
    "vite": "^5.3.4",
    "vitest": "^2.0.3",
    "vue": "^3.4.6",
    "vue-router": "^4.4.1",
    "vue-tsc": "^2.1.4",
    "vuetify": "^3.7.1"
  },

Steps to reproduce

Open a single file, a large SFC, in two tabs side-by-side. I often do this so I can have one tab working on the template and another to work on the script in a large component.

What is expected?

Coloring of the template works in both tabs

What is actually happening?

When scrolling the tab that I'm using for the <script>, the coloring on the template tab breaks. Only once I start scrolling the tab with the <template> in view does the coloring get restored. Sometimes even just clicking on the other tab will break the coloring as well, even without scrolling.

This seems to be because the language server responses are getting applied to all open copies of a file, but there's some kind of optimization to prevent coloring the <template> when it isn't scrolled into view.

The coloring of the <script> is unaffected and always works.

multi-tab-colors-broken.mp4

Link to minimal reproduction

No response

Any additional comments?

The same thing can even happen to different parts of the template when both tabs have different parts of the template in view. E.g. one tab viewing the top of the template, the other tab viewing the bottom.