Index of CSS bugs/quirks/incompatibilities that Bootstrap works around, as of v3.2.0.
Goal: Ensure that each of these is mentioned in at least 1 MDN-like resource.
Because a common wiki is better than a bunch of scattered blog posts.
This list is based on scanning through the comments in Bootstrap's Less source code and the various warnings in Bootstrap's docs.
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.
- twbs/bootstrap#11266
- @mdo: "the comment seems to imply unitless values are busted"
- twbs/bootstrap#13099
label {
display: inline-block;
max-width: 100%; // Force IE8 to wrap long content
}
- See twbs/bootstrap#13141
- No idea as to the cause; hasLayout maybe???
Seems there is a bug in IE7-8 where
input[type="text"]
&<textarea>
that are in a container which hasfilter: alpha(opacity=N);
are not re-rendered when being typed in.Curiously enough, if you move your mouse out of the parent with the
filter
, the text will magically appear / update.
// IE9 fubars the placeholder attribute in text inputs and the arrows on
// select elements in input groups. To fix it, we float the input.
- Details: twbs/bootstrap#11561 (comment)
// IE8-9 hack for event handling
//
// Internet Explorer 8-9 does not support clicks on elements without a set
// `background-color`. We cannot use `filter` since that's not viewed as a
// background color by the browser. Thus, a hack is needed.
//
// For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
// set alpha transparency for the best results possible.
background-color: #000 \9; // IE8
background-color: rgba(0,0,0,0); // IE9
- twbs/bootstrap#11186
- https://github.com/twbs/bootstrap/commit/6a93a6b88a4b874fba5a1d1edd817cbd91ccfacc
- Explicit
background-color: transparent;
does not help filter: alpha(opacity=0);
alone does not helpopacity: 0;
alone does not help- is not supported in IE8
- is supported in IE9, but setting only an
opacity
doesn't avoid the bug
- IE9:
opacity
+ non-transparent
background-color
works as a fix rgba(0,0,0,0)
- is not supported in IE8
- works as a fix in IE9
- IE8-9:
filter: alpha(opacity=0);
+ non-transparent
background-color
works as a fix - Need to test
background: transparent
The following incompatibilities have been successfully documented in MDN:
<fieldset>
min-width
legacy weirdnessresize
requiresoverflow
other thanvisible
- Is already documented in MDN. The Bootstrap source code comment was in error.
- Also filed CSSLint/csslint#517
- iOS Safari
[disabled]
opacity - Android Browser
<select>
menu indicator triangle bug - Viewport
device-width
bug in IE10 on Windows 8 and Windows Phone 8 - Firefox
placeholder
text opacity - Firefox for Android gradients on form controls
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button$compare?to=587233&from=584697
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select$compare?to=587235&from=536155
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea$compare?to=587243&from=578897
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input$compare?to=588303&from=588017
- Firefox for Android border on
input[type="file"]
Hopefully these edits will survive in some form and not get wholesale reverted.