question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

NumberInput controls not rendered properly in Safari

See original GitHub issue

Hello.

I’m using NumberInput from @mantine/core version 3.1.0 and getting the following controls on Safari 14.0.2 (macOS):

Screenshot 2021-11-01 at 2 19 58 PM

It goes away if I zoom out the browser (Cmd -) and appears at the default or higher zoom levels. I’m not able to reproduce that on the docs page. I can fix it by adding margin-top: 0; margin-bottom: 0;. That’s a pretty bare repo with not much that could interfere with the CSS so not sure where this comes from. Is it on my end or a fix could be added?

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:8 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
rtivitalcommented, Nov 3, 2021

Fix was released in 3.1.4, you can now use NumberInput without normalize.css

1reaction
rtivitalcommented, Nov 1, 2021

I’ll fix it in future releases to not rely on normalize css in Safari

Read more comments on GitHub >

github_iconTop Results From Across the Web

Display flaw with HTML input type number on iPhone iOS/Safari
Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT ... In 2 out of 10 page refreshes, the input was rendered with zero...
Read more >
Numeric Inputs - A Comparison of Browser Defaults | CSS-Tricks
While that does a nice job of removing the controls, it appears we have no control over the design of them. How Safari...
Read more >
Why the number input is the worst input - Stack Overflow Blog
A number input has native increment/decrement buttons. ... It should be noted I am not alone in the anti-number input camp.
Read more >
Safari Technology Preview Release Notes - Apple Developer
Added a setting to control whether nodes that are not rendered are ... Fixed <div> with border-radius not getting repainted correctly when the...
Read more >
<input type="number"> - HTML: HyperText Markup Language
The number input type is not appropriate for values that happen to only ... When you create a number input with the proper...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found