Question

I’ve run into a problem where the up/down spinners are not showing in my <input type="number"/> elements when using bootstrap 1.4. The spinners are still there: you can click them to increase/decrease the number, even though they’re not visible.

I think I’ve narrowed it down to the following CSS declaration. See http://jsfiddle.net/tKTRx/1/.

input, textarea {
  -webkit-transform-style: preserve-3d;
  …
}

What does this styling do? Is there a way I can work around it? (It doesn’t seem to be a problem in later versions of bootstrap, but I can’t upgrade quite yet).

Answer 1

This is a webkit bug that has been fixed in Chrome Canary. You can read more about the issue on the bootstrap github page: https://github.com/twitter/bootstrap/issues/630 but the way to fix it is to add a style:

input.flat, textarea.flat {
  -webkit-transform-style: flat !important;
}

and then when you have a input/textarea add the class flat.