`MInput`'s `<input>` inherits `border-radius` from its container
berwyn opened this issue · comments
Bug description
Creating an MInput
of either variant sets a border radius on the container, however because the is set to inherit border-radius, the <input>
itself has a border radius causing characters to be cut off. This especially affects thin characters, those with ascenders or descenders, and IME candidates.
You can see here that the element has inherited the border-radius
from its parent, in spite of not having a border
You can see here in action a latin lower-case letter j
gets horrifically cut off and instead looks like i
Similarly, when using a Japanese IME, the character 肉
and the IME candidate underline is cut-off
Reproduction
<m-input placeholder="Sample Text" />
Environment
System:
OS: macOS 11.6.4
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 10.49 GB / 64.00 GB
Shell: 5.8.1 - /usr/local/bin/zsh
Binaries:
Node: 12.18.2 - ~/.volta/tools/image/node/12.18.2/bin/node
npm: 6.14.5 - ~/.volta/tools/image/node/12.18.2/bin/npm
Watchman: 2022.02.28.00 - /usr/local/bin/watchman
npmPackages:
@square/maker: ^6.5.2 => 6.5.2
vue: ^2.6.14 => 2.6.14
webpack: ^5.37.0 => 5.38.1
Addressed by
No response
Can you contribute a fix?
- I’m interested in opening a pull request for this issue.
hey @berwyn thanks for reporting this! if you're interested in submitting a PR for this issue please feel welcome to do so, also if you have any questions or need any help please feel welcome to ask me here or on Slack!
Closed by #246