search

vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
https://pinia.vuejs.org
MIT License
13.08k stars 1.05k forks source link

docs page flickering #686

Closed theoephraim closed 2 years ago

theoephraim commented 3 years ago

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 commented 3 years ago

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

posva commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

The flickering bug has been fixed upstream

vlazar commented 2 years ago

Is the fix it still not live? As soon as I open the second tab with https://pinia.esm.dev/ it starts flickering.

sinchijackal commented 2 years ago

Is the fix it still not live? As soon as I open the second tab with https://pinia.esm.dev/ it starts flickering.

the same thing happens to me

posva commented 2 years ago

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 commented 2 years ago

Still happening, see video:

https://user-images.githubusercontent.com/30939926/148706994-71f2c2c4-a436-4b2f-97fc-bfbc1d828ab7.mov

Cyburstud commented 2 years ago

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 screenshotDemo

oinkbark commented 2 years ago

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

plitter commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

phil294 commented 2 years ago

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??)