Misalignment Between Separate dial code and placeholder

[bhaveshpariyani]

I am facing some issue for misalignment between separate dial code and placeholder below is the SS of the same.

This happens at a particular scale only currently in my windows 11 laptop if I change to recommended scale then it works perfect but if I choose 100% then there is some misalignment

I tried same thing in here https://intl-tel-input.com/examples/separate-dial-code.html as well here if I zoom out to 90% or 67% then same issue occur

Currently I am using Chrome for above.

[jackocnr]

Apologies for the delay in getting to this - life has been getting in the way.

This is an interesting problem! The input placeholder/typed text is vertically centred because it's in an input, so that's just up to the browser, although you need to make sure your vertical padding is equal on the top and bottom. As for the separate dial code element, it has the same font, font-size, and line-height as the input text (unless you have overridden this - you should check to make sure you keep these things the same between both elements), and is vertically centred via its parent, which has the same height as the input, along with display:flex and align-items:center, which should perfectly vertically centre it's children. So if you're seeing an issue, and you've checked the above things, then it's because the browser is failing to implement the spec properly - either in terms of how it vertically centers text in an input, or on how it vertically centers things with display:flex. I don't think there's anything we can do here, unfortunately. Maybe you can open a bug report with the browser?