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

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.

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.

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.

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.

Hi there,
this topic is quite old, but recently I started having the same problem: In “Fit to screen” scale, my prototype is displaying some of my components with some pixels missing and other components are moving a bit while hovering. It took me A LOT of time to figure out, that there is no problem with my components but with figmas rendering: In the 100% view everything looks and works exactly as it is supposed to! The problem is visible in Firefox and Chrome.

Is there anything I can do to solve this issue? The 100% view is ugly with my prototype and I need to use the fit to screen view.

Hey @Daniela29 I suspect that the rendering in the “Fit to screen” setting causes elements to be placed on subpixels and Figma has problems with this. Even at 100% I often notice some small rendering errors, especially with interactive elements (hover animations etc.).
There is probably no direct way to solve this issue.

Edit:
Oh wow I just saw that I basically wrote the same already before in April 2023 😅
nevermind then…

Found the issue.

Apply a style to the font, and/or make line height fix ( remove auto)

It’s so calming when it doesn’t wiggle anymore and just works.

Edit:
Kinda wierd, seems like it doesnt fix it for too long. restarting figma help for a moment.