Hi, how are you?
I’ve encountered a somewhat strange problem.
When selecting an input field to type a value, it keeps moving.
However, the size is OK for both input fields and the label.
By pressing F12, I noticed a slight difference in the label’s size. I don’t know if this could be the cause of the input field moving when selected.
What’s going on, does anyone know?
Below are images and a video for demonstration.
Hey, I just went through those clips. As a dev, I can tell you exactly what’s happening: You’re dealing with a Cumulative Layout Shift (CLS) caused by a Reflow error in the browser.
Basically, when you click that field, the browser is recalculating the Box Model. Even a tiny 1px difference in the label usually caused by a font-weight change or a border popping up on :focus is forcing the input to ‘jump’ to make room.
Here’s the real issue: While it seems like a small glitch, it’s a trust killer. 
When a UI ‘moves’ under a user’s mouse, it feels unstable and unprofessional. If the interface feels shaky, users subconsciously hesitate to trust the platform with their data or payments.
fixes like usually just needs a tweak to the CSS (likely a box-sizing or outline fix) to make the whole experience feel rock-solid and premium again.
I’m ready to help check it Just to be sure:
Is this happening on all browsers (Chrome/Safari), or is it mostly acting up on mobile? 
Are you using a framework like Tailwind or Bootstrap, or is this a custom CSS setup?
Maybe it’s due to border sizing.
On Hover, maybe changing the size of the input border is why this is happening.
Check this.
If you switch from no border to border, the Input looks like it’s shifting after each transition.
I’m not using any custom styling. I’m using Bubble’s default styling.
It’s happening in all browsers.
I removed the conditional that changed the element’s border when the element was focused. But even so, the problem persisted.
If you can share your editor, I may be able to help you more effectively.
