On mouse hover icon is getting streched and icons flickering

[apaleja]

Hi @nickcam,

With latest changes you've provide to accommodate padding/margin in document is working well. But I am facing few issue on higher resolution screens mainly:

1. On mouse hover/out, icons are flickering
2. On mouse hover/out, Icon size is getting changed (I know we can do icon animation using css transform but I am not using it)
3. On higher resolution screens icon is changing to oval shape on hover either in width or in height.

I have attached a video showing all above issues. I thing the document width and screen height is getting used which can be causing the issue. I am not sure if this can be helpful but here is Document size of the recorded screen:

• screen.width : 1536 | screen.height : 864
• document.body.clientWidth : 1536 | document.body.clientHeight : 750
• window.outerWidth : 1536 | window.outerHeight : 838
• window.innerWidth : 1536 | window.innerHeight : 750

It will be helpful if you can have any idea about what can be the root cause.

https://user-images.githubusercontent.com/4106309/116771629-b67f8d80-aa6a-11eb-959e-c7440722f6cd.mp4

[nickcam]

Yeah that's weird. Does it happen in all browsers? Looks like a css thing when it's trying to scale the svg elements. You say you're not using any css transforms though, so probably not that I guess.

Have you tried inspecting when hovered over to see what attributes the dodgy elements have?

[apaleja]

@nickcam no. I didn't get chance to debug it further but I was able to reproduce for all browsers for higher resolution screen. But would like to find out and solve it. Any pointers ?

[nickcam]

Ok, something funky is happening when it adds the element to the svg surface. That would be in this function - https://github.com/nickcam/FlareClusterLayer/blob/1ad1e5100e09b8b366d57a548552a92261258f8f/typescript/FlareClusterLayer_v4.ts#L816

If you're not using flares or any custom styling beyond the predefined renderers you can probably uncomment the calls to _activateCluster so nothing happens when you hover over.

[apaleja]

@nickcam Yes. that's what I did temporarily for now as I am not using flares. but I'll be adding flare support very soon and I am also planing to upgrade ArcGIS JS API to 4.19. Let me know if you can provide any pointers for same and maybe I can spend some time to upgrade and create PR.