twbs--bootstrap/docs/browser-bugs.html

---
layout: default
title: Wall of browser bugs
slug: browser-bugs
lead: "A list of the browser bugs that Bootstrap is currently grappling with."
---


<div class="bs-docs-section">
  <h1 id="browser-bugs" class="page-header">Browser bugs</h1>

  <p>In order to deliver a consistent and usable cross-browser experience, Bootstrap currently has to work around several outstanding bugs in major browsers. And in some cases, we are completely unable to work around certain bugs, and must instead either document them for the benefit of our users or accept a degraded experience. We publicly list browser bugs that are impacting us here, in the hopes of expediting the process of fixing them. For information on Bootstrap's browser compatibility, <a href="../getting-started/#support">see our browser compatibility docs</a>.</p>

  <div class="table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th>Browser(s)</th>
          <th>Summary of bug</th>
          <th>Upstream bug(s)</th>
          <th>Downstream issue(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Firefox</td>
          <td>Allow use of line-height for <code>&lt;input&gt;</code></td>
          <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=697451">Mozilla bug #697451</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/2985">Bootstrap issue #2985</a></td>
        </tr>
        <tr>
          <td>Firefox</td>
          <td>Unusual default form control styles on Android</td>
          <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=900871">Closed Mozilla bug #900871</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=763671">Open Mozilla bug #763671</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/8702">Bootstrap issue #8702</a></td>
        </tr>
        <tr>
          <td>Firefox</td>
          <td><code>max-width: 100%;</code> doesn't work inside tables</td>
          <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=975632">Mozilla bug #975632</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/10690">Bootstrap issue #10690</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>(More investigation needed&hellip;)</td>
          <td>None yet</td>
          <td><a href="https://github.com/twbs/bootstrap/issues/1969">Bootstrap issue #1969</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>Weird button behavior with some number inputs</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/8350">Bootstrap issue #8350</a>, <a href="https://github.com/necolas/normalize.css/issues/283">Normalize.css issue #283</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>Navbar rendering problem on Windows after several clicks</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=272750">Chromium issue #272750</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=119793">WebKit bug #119793</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/9226">Bootstrap bug #9226</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td><code>display: table;</code> within <code>display: block;</code> forces sibling content to new line</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=309483">Chromium issue #309483</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/9950">Bootstrap issue #9950</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>Unwanted vertical lines when printing styled <code>&lt;select&gt;s</code> on OS X</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=282918">Chromium issue #282918</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/11245">Bootstrap issue #11245</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>inline-block element collapses white-space on Windows</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=329574">Chromium issue #329574</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/11885">Bootstrap issue #11885</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td>Incorrect viewport size used for media queries when printing</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=273306">Chromium issue #273306</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/12078">Bootstrap issue #12078</a></td>
        </tr>
        <tr>
          <td>Chrome &amp; Safari</td>
          <td>OS X scrollbar clipped in <code>select[multiple]</code> with padding</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=342208">Chromium issue #342208</a>, <a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/12536">Bootstrap issue #12536</a></td>
        </tr>
        <tr>
          <td>Chrome</td>
          <td><code>display: table-cell; width: 100%;</code> doesn't work correctly on date input</td>
          <td><a href="https://code.google.com/p/chromium/issues/detail?id=346051">Chromium issue #346051</a></td>
          <td><a href="https://github.com/twbs/bootstrap/issues/12548">Bootstrap issue #12548</a></td>
        </tr>
        <tr>
          <td>Safari</td>
          <td>Insufficient CSS percentage precision</td>
          <td>(No public bug tracker)</td>
          <td><a href="https://github.com/twbs/bootstrap/issues/9282">Bootstrap issue #9282</a></td>
        </tr>
        <tr>
          <td>Safari</td>
          <td>Justified nav rendering bug</td>
          <td>(No public bug tracker)</td>
          <td><a href="https://github.com/twbs/bootstrap/issues/9774">Bootstrap issue #9774</a></td>
        </tr>
      </tbody>
    </table>
  </div>

</div>