Skip to content

Index of CSS bugs/quirks/incompatibilities that Bootstrap works around

License

Notifications You must be signed in to change notification settings

figure0/bs-css-hacks

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 

Repository files navigation

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.


To be documented


iOS date input

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

IE8 line wrapping bug

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

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.


IE8 and CSS max-width on images


IE9 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.

IE9 click events require background-color bug

// 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 help
  • opacity: 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

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.

About

Index of CSS bugs/quirks/incompatibilities that Bootstrap works around

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published