README.md

bs-css-hacks

Index of CSS bugs/quirks/incompatibilities that Bootstrap works around.
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.

---

To be documented

---

// Special styles for iOS date input
//
// In Mobile Safari, date inputs require a pixel line-height that matches the
// given height of the input.

• twbs/bootstrap#11266

---

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

• See twbs/bootstrap#13141

---

resize requires overflow other than visible

• https://github.com/twbs/bootstrap/commit/648c4689273647c321dd6e3979d910282e9a9339
• https://developer.mozilla.org/en-US/docs/Web/CSS/resize
  • "resize does not apply to blocks for which the overflow property is set to visible."
• http://css-tricks.com/almanac/properties/r/resize/
  • "this property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you'll have to set something like overflow: scroll;"
• http://www.w3.org/TR/css3-ui/#resize
  • "Applies to: elements with overflow other than visible"
  • "The resize property applies to elements whose computed overflow value is something other than visible."

---

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 twbs/bootstrap#3552

---

• Android <select> bug
• http://stackoverflow.com/questions/14744437/html-select-box-not-showing-drop-down-arrow-on-android-version-4-0-when-set-with

---

• h5bp/html5-boilerplate#984 (comment)

---

// 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)

---

// IE10 in Windows (Phone) 8
//
// Support for responsive views via media queries is kind of borked in IE10, for
// Surface/desktop in split view and for Windows Phone 8. This particular fix
// must be accompanied by a snippet of JavaScript to sniff the user agent and
// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
// our Getting Started page for more information on this bug.
//
// For more information, see the following:
//
// Issue: https://github.com/twbs/bootstrap/issues/10497
// Docs: http://getbootstrap.com/getting-started/#browsers
// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/

@-ms-viewport {
  width: device-width;
}

• http://getbootstrap.com/getting-started/#support-ie10-width

---

// 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

• https://github.com/twbs/bootstrap/commit/6a93a6b88a4b874fba5a1d1edd817cbd91ccfacc

---

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=589697&from=584707
• 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
• Firefox placeholder text opacity
  • https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder$compare?to=587215&from=522761
• 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

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