docs page flickering

[theoephraim]

Reproduction

Using latest chrome on a mac, open 2 tabs to https://pinia.esm.dev/ and the page starts flickering weirdly.

I can see it's caused by the dark mode flipping on and off rapidly.
I assume it has something to do with how dark mode selection is being saved in localstorage.

[Lilja]

This is happening for me from time to time. Firefox, windows 10.

[posva]

It seemed like a weird bug related to SSG + the dark mode from vueuse but I will soon migrate to a different theme that shouldn't have this issue

[dapug]

As soon as you open more than one tab with the pinia site loaded ... poof, flicker.

Also CPU and GPU load spikes up. Clearly some sort of infinite loop thing happening... hopefully not due to using Pinia itself!

[posva]

No, it's not related to pinia which are not needed in the docs. Opening devtools and changing the local storage property that sets the theme should allow fixing this. Other strategies are reloading the page after closing the other ones.

This will be fixed in the next migration of the docs anyway.

[posva]

The flickering bug has been fixed upstream

[posva]

As a temporary workaround, while having only one tab opened with the docs, run this js in the console:

localStorage.setItem('pinia-color-scheme', 'dark') // or 'light' if you prefer light theme

[awacode21]

Still happening, see video:

pinia-website-flicker.mov

[Cyburstud]

I'm still getting this too. Was wondering how this feature was enabled anyway since it looks like it's vitepress. I know that Evan mentioned new docs were coming soon, so I assume we're waiting for that release? I see there's a pull request on vitepress to fix: export default theme type & properly type vitepress/theme.

The New Vue by Evan You

[oinkbark]

Still getting this on Chrome 97 (M1 Mac) even after using the temporary localStorage workaround.

[plitter]

https://streamable.com/zf57tl you can see the switch back and forth when you do inspect... A little bit surprised that this is still happening.

[Cyburstud]

Please expedite addressing this if possible as it does not meet the W3C WCAG 2.0 specifications to not allow Three Flashes or Below Threshold. This is a potential health concern for those with epilepsy or a neurological condition that can easily trigger seizures.

https://www.w3.org/TR/UNDERSTANDING-WCAG20/seizure-does-not-violate.html

[theoephraim]

Ill give it a go today. Don’t expect it’s too tough to track down.

[phil294]

Not only does the page flicker, it eats up 100% CPU on all cores, rendering the entire browser useless. I had to disable JavaScript globally for this to settle down (why do doc sites even need JS??)