Texts are either moving by 1px to the left or the font is getting larger/thicker

Below is what my interactive component looks like. It’s set from default to hover. All it does is just add a line (a rectangle) underneath and changes the font color to black from grey. When I remove it out of the interactive component and do it manually before this before version. It works perfect. But once I use the interactive component feature, on hover it moves a bit. Really slight but it bothers me. It’s weird because it only does that for 1 out of 3 of the links that I have.

Ex) Link 1 (navigates to another page once clicked on), Link 2 (navigates to another page once clicked on), Link 3 (opens an external link)
Link 1 & 2 interactive components work fine. But Link 3 has the weirdness to it. It doesn’t stay in the same place.

It is hard to say with the information you are providing, but I will attempt something.

If the line you have below your text is hidden and then shows on hover… like not just opacity 0% but completely hidden, then that’s your issue. Try removing colour instead of hiding it.

If that is not your problem, please share your link, I’ll take a look for you.

Hope that helps!

It is hidden. Not 0%. I tried just right now if it was 0%, but it’s still doing the same thing.

I don’t think that’s the issue because like mentioned above, Link 1 & 2 are working perfectly fine. But Link 3 is where it’s messing up.

So I didn’t want to share my file, so I made a duplicate one. I don’t have anything linked at all. Just the hover interaction. And now it’s weird because Link A is the one that’s not working correctly. But the rest are.

What’s odd is that if I use 100% view then it works perfectly. All 3 of them. But if I use the “Width – Scale down to fit width” then Link A doesn’t work perfectly. That also holds true with my original file with Link 3. Link 3 doesn’t work well on Width, but does work well on 100% view.

image

Update: I’m not sure what’s going on but I can’t seem the replicate the error anymore.

It’s still happening on my original file though. Is there a way for me to privately message over my link?

Hey Kimmy, I’m having the same issue, the text on my interactive components shifts a couple of pixels whilst hovering. For me it seems to happen when there are multiple interactive components on a frame/artboard. If I make a new frame and put just one interactive component on it the text doesn’t blip. Just wondering if you found a solution to it, I can’t find any info online?

Hey! I never found a solution so I actually just turn off the beta feature now unfortunately!

Same here. Elements that are supposed to stay in place (like text or icons) tend to wiggle a bit while playing the hover animation (smart animate) on the whole component. Happens with single-component Frames or with multiple components on a Frame.

3 Likes

I just occured the same problem with my interactive componets and cannot figure it out. Only tp I have that it only happens with the ‘dissolve’ animation type. Anyone found a solution in a meantime?

I’m having a similar issue.

When I interact with a component which houses nested components, ALL the text in the component, which is spread over different labels, headings etc shifts by what it looks like a pixel ‘sometimes’ but quite regularly.

Once it’s done it once it stays put with further interactions. yesterday this was happening on one component but now it’s happening everywhere, despite not having changed anything in most of the components displaying the problem.

It really messes things up as the first interaction with most components results in a text pixel shift which is extremely offputting.

I am too facing the same issue.

1 Like

In a scaled view objects can slightly shift because their position might be rendered on a coordinate containing subpixel / decimal values.

Even in 100% view Figma can have render or performance issues with interactive components. They are still not fully reliable and many rendering bugs do exist.