15 pixel different in width between Firefox and Chrome

[amdrew]

I did search so I apologize if it's already been discussed.

There seems to be a 15px difference in width between Firefox and Chrome (probably Safari as well).

I.e the examples page (http://jedwatson.github.io/react-input-autosize/):

Chrome:
Width of bottom input is 78 pixels

Firefox:
Width is 93 pixels

I'm seeing the same 15 px difference in my project.

[dliu120]

+1

This PR fixes the issue. I am currently overriding the sizer style(s) with css:

div[style] {
    overflow: hidden !important;
}

[danielrob]

@dliu120 this raises the input above the line for me in Firefox 60.0.2 on OSX (sandbox). My current very sad bit of browser detection workaround is:

const WrapHackAutosizeInput = styled.span`
  div[style] {
    margin-right: ${() => window.navigator.userAgent.includes('Firefox') ? '-17px' : '-2px'};
  }
`

[iJoyCode]

Same problem, fix pls

[wtesler]

Same

[keul]

The most annoying behavior I have is when the field is empty, where I have an input as 17 pixel width.

On a react-select based project I have (that internally use this library) emtpy selects (on the left) fills more vertical space because the input goes on a second line.

[ozluy]

I just created a new NPM module please check it out:

• 252 byte size only 10% of react-input-autosize (2.3KB)

https://github.com/ozluy/calculate-text-width