Subscribe on changes!

vue breaks when changing classlist in firefox browser

avatar
Jul 25th 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNp9kc1uwjAQhF9l6wsgpQHEjQaktuJApf6o7dGXKGyIwbEt/wASyrt3bQT0gLh5d2asb7RH9mxMvgvIpqxwlRXGg0MfzJwr0RptPRxBq3cdlMdVBhZr6KC2uoUepXpccVVp5SjV6D3MoqHvbcDBU5ToqyUF7a6U/f4AZvNky2kMSOaH65TBZDQaxVQxPHEQAQ0eWyNLjzQVzRh2j6KecRZznM23ukbcFsNmHOXhxcsy5h1h1WKdb5xWVO7IFQBnlW6NkGg/jReEzdkUkhK1Ukq9f0u72CA776sGq+2N/cYd4o6zL4uOOiJnF82Xdo3+JC9+PvBA74vY6lWQ5L4jfqPTMkTGk+0lqBVh//Ml2mU6kVDrX7c4eFTuXCqCRmeX/JzRrV7vVL/iTvJJynHVse4P1M2zzg==

Steps to reproduce

Open Vue SFC Playground and wait ~5 seconds for the text in h1 to start appearing and disappearing

Open dev-tools in browser, add class 'dark' to body

What is expected?

h1 will continue to fade in and out when interval changes ref value to !value

What is actually happening?

in SFC everything stops working, in local project v-if or v-show

System Info

Doesn't work only in firefox browser version 115.0.2 (I don't know about other versions.)

Any additional comments?

What unites vue sfc and local project is that tailwind is everywhere and class 'dark' is used for theme