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:

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: twbs/bootstrap#11561 (comment)

`: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:

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

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

License

cvrebert/bs-css-hacks

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Error
Looks like something went wrong!

Packages