kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Avoid hacking around the temporal input bug in iOS 

- Rather than use CSS hacks, let's avoid needing to hack anything
- Creates a new Reboot entry to simply reset the appear of the temporal inputs, thereby avoiding the problem entirely
- Less than ideal for conveying affordance on iOS, but given bugginess of the input itself, seems a decent tradeoff
This commit is contained in:
Mark Otto 2016-04-23 14:56:36 -07:00
parent 9f2ab98026
commit 6764171404
2 changed files with 12 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
scss/_forms.scss
View File

@ -118,38 +118,6 @@ select.form-control {
}
// Todo: clear this up
// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `week`.
_::-webkit-full-page-media, // Hack to make this CSS be Safari-only; see http://browserbu.gs/css-hacks/webkit-full-page-media/
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
&.form-control {
line-height: $input-height;
}
&.input-sm,
.input-group-sm &.form-control {
line-height: $input-height-sm;
}
&.input-lg,
.input-group-lg &.form-control {
line-height: $input-height-lg;
}
}
// Static form control text
//
// Apply class to an element to make any string of text align with labels in a

12
scss/_reboot.scss
View File

@ -317,6 +317,18 @@ textarea {
border-radius: 0;
}
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
// Remove the default appearance of temporal inputs to avoid a Mobile Safari
// bug where setting a custom line-height prevents text from being vertically
// centered within the input.
//
// Bug report: https://github.com/twbs/bootstrap/issues/11266
-webkit-appearance: listbox;
}
textarea {
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
resize: vertical;