nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legend Flickering with Svelte

CalebSchwind

I'm using sveltekit and arcgis js api v4.30. The legend is flickering whenever a new layer is added (see gif below). This wasn't an issue in v4.28.

Any ideas on how to fix this?

Below is a repository with an example of the issue.

To test: clone that repo, run "npm install", run "npm run dev", open http://localhost:5173/ in your browser, click the "Add Layer" button several times to see the flicker.

https://github.com/cschwinderg/svelte-legend-flicker

Find more posts tagged with

Accepted answers

All comments

CalebSchwind

Awesome! Thank you!

Sage_Wall

@CalebSchwind @Grant_DeCoux

This was fixed and will be part of the 4.31 release 🙂

Grant_DeCoux

I see, thanks! I found the bug does not affect Safari. But does appear when using chrome on my Mac

Sage_Wall

Hi @Grant_DeCoux ,

Unfortunately it's not likely to make the 4.31 release. We have had to prioritize other issues. Currently it's tagged for 4.32. This is a strange bug and only seems to affect ESM builds on PCs. The macs we've tested with seem unaffected, but we need to do more testing and debugging.

Grant_DeCoux

Hello, this is blocking me from updating to the latest js api version. Will this be fixed in 4.31?

CalebSchwind

I see the flickering in the first codepen (ESM), but not in the second codepen (AMD modules).

Sage_Wall

Thanks @CalebSchwind , Good to know about the react app. So far I've been able to repro in SvelteKit, Svelte, Vite TS and even using ESM modules via CDN. I've also noticed, without any serious testing, this may only affect PCs. When I tried opening up this ESM codepen I didn't see the flickering on a BrowserStack mac but do on my PC laptop. It's really strange but I've created an issue and we'll continue debugging. I don't think there will be anything you'll be able to do app side to prevent this. I'd be interested to find out if you or other's see the flickering in this ESM codepen.

https://codepen.io/sagewall/pen/rNEeOKK

It looks like the whole legend is being re-rendered when a layer is added.

My personal observations are I see the flickering when using the ESM modules on PC (npm and cdn) but not when I use the AMD modules.

https://codepen.io/sagewall/pen/RwzaPMY

CalebSchwind

Thank you for looking into this. I have a react app that I updated to 4.30 and it doesn't have the issue.

Sage_Wall

Hi @CalebSchwind

Thanks for posting. I'm a SvelteKit fan too 😀. I'm not sure what's going on here. I noticed you were using a lot of async dynamic imports so my first thought was one of those might be holding things up but I doubt that's it after thinking more about it. I wasn't able to repro in a vanilla JS codepen. https://codepen.io/sagewall/pen/BagjEvV There is a little shimmy as the first layer populates but the whole thing doesn't flicker like happens in SvelteKit. I'll try and look at it closer and clone your repo tomorrow.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.