bs-css-hacks

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.
See Also:

• Bootstrap's Wall of Browser Bugs
• List of browser bugs that jQuery works around

To be documented

IE9 <input> display: table-cell bug

// 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: https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855

:hover and/or :focus stickiness on mobile browsers

• Bootstrap doesn't currently have any code specificially related to this, but there have been a few bug reports about this, so I figure it oughtta be mentioned in MDN.
• https://github.com/google/WebFundamentals/blob/master/src/site/_en/fundamentals/input/touch/activestates/index.markdown#hover-and-focus-stickiness
• Might eventually get a partial fix in Chrome: https://code.google.com/p/chromium/issues/detail?id=370155

Resulting documentation improvements

The following incompatibilities have been successfully documented in MDN:

• <fieldset> min-width legacy weirdness
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset$compare?to=592121&from=584707
• resize requires overflow other than visible
  • Is already documented in MDN. The Bootstrap source code comment was in error.
  • Also filed https://github.com/CSSLint/csslint/issues/517
• iOS Safari [disabled] opacity
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input$compare?to=588017&from=572223
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea$compare?to=588343&from=587245
• iOS temporal <input> with display: block has its text vertically misaligned
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input$compare?to=596375&from=596363
• Android Browser <select> menu indicator triangle bug
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select$compare?to=590135&from=590133
• Viewport device-width bug in IE10 on Windows 8 and Windows Phone 8
  • https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport$compare?to=592567&from=592565
• Firefox placeholder text opacity
  • https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder$compare?to=592109&from=522761
  • https://github.com/Fyrd/caniuse/pull/549
• 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"]
  • https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input$compare?to=588351&from=588303
• IE8-9 click events on transparent overlaid elements bug
  • https://developer.mozilla.org/en-US/docs/Web/Events/click$compare?to=615503&from=402259
  • https://developer.mozilla.org/en-US/docs/Web/CSS/background-color$compare?to=615509&from=494737

Hopefully these edits will survive in some form and not get wholesale reverted.

IE8, so still undocumented

IE8 inline-block + float line wrapping bug

label {
  display: inline-block;
  max-width: 100%; // Force IE8 to wrap long content
}

• See https://github.com/twbs/bootstrap/issues/13141
• Progress on a reduced testcase: https://github.com/cvrebert/bootstrap/tree/ie8-label-wrap-bug
• Possibly related to http://stackoverflow.com/questions/22550988/native-ie8-why-do-these-inline-block-elements-not-wrap-words-if-their-pare ?

IE8 and CSS max-width on images

• https://github.com/twbs/bootstrap/issues/9239
• https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989

Unable to reproduce, so still undocumented

IE8 text input rendering bug when parent has opacity alpha filter

Seems there is a bug in IE7-8 where input[type="text"] & <textarea> that are in a container which has filter: 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.

• See https://github.com/twbs/bootstrap/pull/3552
• http://jsbin.com/bazakefu/3/
• Unable to reproduce in IE7 or IE8 on Sauce Labs
• Perhaps related to http://snook.ca/archives/html_and_css/ie-position-fixed-opacity-filter ?
  • Couldn't repro this on Sauce either...