Skip to content
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

Odd rendering of <Input> in Safari 14.1.2 #363

Closed
nstuyvesant opened this issue Aug 17, 2021 · 2 comments
Closed

Odd rendering of <Input> in Safari 14.1.2 #363

nstuyvesant opened this issue Aug 17, 2021 · 2 comments

Comments

@nstuyvesant
Copy link

nstuyvesant commented Aug 17, 2021

Looking at the samples of the Input component on https://sveltestrap.js.org/?path=/story/components--inputs, the rendering of types Date, Datetime, and Time show too much padding especially at the bottom of the Input.

Here's a screenshot on macOS 11.5.2 with Safari 14.1.2 (type="number" shown as well for comparison since it looks good):
image

Here's a screenshot on the same Mac using Chrome 92:
image

Also, you'll notice the color of the date and time separators ("/" and ":") and comma in the placeholder are black while the other content is light gray. This color difference doesn't appear in Chrome (although the placeholders for DateTime, Date, and Time on Chrome are black and don't match the placeholder for type number).

@bestguy
Copy link
Owner

bestguy commented Aug 17, 2021

Thanks @nstuyvesant , I think this is a Bootstrap 5.1 CSS issue - am seeing the same on https://getbootstrap.com/docs/5.1/forms/form-control/#example if I change input types to date, etc:

Screen Shot 2021-08-17 at 9 15 07 AM

@nstuyvesant
Copy link
Author

Confirmed that [email protected] is the culprit. Logged an issue to their repo:
twbs/bootstrap#34760

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants