bestguy / sveltestrap

Bootstrap 4 & 5 components for Svelte
https://sveltestrap.js.org
MIT License
1.3k stars 183 forks source link

Odd rendering of <Input> in Safari 14.1.2 #363

Closed nstuyvesant closed 3 years ago

nstuyvesant commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

Confirmed that Bootstrap@5.1.0 is the culprit. Logged an issue to their repo: https://github.com/twbs/bootstrap/issues/34760