Hello,
This is a big update but it seems to not solve the problem a lot of us got.
Attached to this message you’ll find a prototype that i will explain next:
Bug Demo
Background:
- Button + Icon (And button with text only): Is a component with variants for Hover state
- Font used is “Montserrat”. Available on GF and installed in my computer
What you can see:
- If you happen to have Montserrat installed on your computer, the top menu bar will be glitchy on hover, while the bottom menu bar will work perfectly well.
- If you don’t have Montserrat installed, both menus will work as expected.
So here we have to put our attention on two important things:
- For whatever reason, when i install a font that is also available on google fonts, the menu goes glitchy. If you remove the font, everything goes back to normal.
- As per why the bottom menu always worked, the answer is that i only took the main component with its variants, duplicated and renamed to “[Component] v02”. And it seems to refresh something under the hood, and the component and its variants then work as expected.
i wanted to share this comment to give you guys a hint that maybe this whole topic about missing fonts is not over yet. And to give the users a maybe usable workaround for this:
If you happen to find a glitchy hover interaction, make a duplicate copy of your document, so you can be able to safely mess with it, and then proceed to duplicate the main interactive components until you find the one causing the glitch.
In my case, what you see here is a little piece of a more complex menu. I proceed to start duplicating the core components of it, in this case the button, and everything worked at first try.
For the sake of testing, i also tried to go the other way and instead of duplicated from the small, i just duplicated the whole menu. Result is that the menu kept behaving glitchy.
So my advice is to try to pin point the faulty component duplicate it, rename it and reassign it.
Edit: Seems Firefox works fine
Thanks