New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Numbers entered into an Input element changes the letter spacing of all characters #8636

Closed
CGreenburg opened this Issue Dec 15, 2017 · 3 comments

Comments

Projects
None yet
2 participants
@CGreenburg

CGreenburg commented Dec 15, 2017

Version

3.0.1

Environment

MacOS 10.12.6, Google Chrome 63.0.3239.108

Reproduction link

https://ant.design/components/input/

Steps to reproduce

Go to https://ant.design/components/input/ in Google Chrome. Type some letters into any input field, then type a number. The spacing should change.

What is expected?

The letter spacing should remain the same.

What is actually happening?

The letter spacing is changing.


This does not happen in Firefox or Safari on my MacBook.

@CGreenburg

This comment has been minimized.

CGreenburg commented Dec 15, 2017

Here's a gif of what's happening. Again, this doesn't happen in Firefox or Safari, only Chrome.
input_spacing_bug

@afc163 afc163 self-assigned this Dec 16, 2017

@afc163

This comment has been minimized.

Member

afc163 commented Dec 16, 2017

I believe it is chrome's bug to treat unicode chars in same word as same font face.

// http://stackoverflow.com/a/13611748/3040605
@font-face {
font-family: "Helvetica Neue For Number";
src: local("Helvetica Neue");
unicode-range: U+30-39;
}

https://css-tricks.com/almanac/properties/u/unicode-range/

You can override the @font-family variables as a workaround.

@afc163 afc163 closed this Dec 16, 2017

@afc163 afc163 added the WON'T FIX label Dec 16, 2017

@afc163 afc163 reopened this Jan 12, 2018

@afc163 afc163 added Bug🐛 and removed WON'T FIX labels Jan 12, 2018

@afc163 afc163 closed this in f88a405 Jan 12, 2018

@afc163

This comment has been minimized.

Member

afc163 commented Jan 12, 2018

Change Helvetica Neue to another number-monospace font Tahoma for number to resolve this problem. 😅

@CGreenburg

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment