rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-02 14:24:19 +01:00
Code Issues Actions Packages Releases Activity
8fc638676d
Bootstrap/browser-bugs/index.html
Chris Rebert 8fc638676d Regenerate Wall of Browser Bugs
2015-12-06 02:01:02 -08:00

2 lines
17 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta name=description content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development."> <meta name=keywords content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development"> <meta name=author content="Mark Otto, Jacob Thornton, and Bootstrap contributors"> <title> Wall of browser bugs &middot; Bootstrap </title> <link href=../dist/css/bootstrap.min.css rel=stylesheet> <link href=../assets/css/docs.min.css rel=stylesheet> <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src=../assets/js/ie-emulation-modes-warning.js></script><!--[if lt IE 9]><script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]--><link rel=apple-touch-icon href=/apple-touch-icon.png> <link rel=icon href=/favicon.ico> <script>!function(e,t,a,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(a),s=t.getElementsByTagName(a)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-146052-10","getbootstrap.com"),ga("send","pageview");</script></head><body> <a id=skippy class="sr-only sr-only-focusable" href=#content><div class=container><span class=skiplink-text>Skip to main content</span></div></a> <a href=http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ class=v4-tease>Aww yeah, Bootstrap 4 is coming!</a> <header class="navbar navbar-static-top bs-docs-nav" id=top role=banner> <div class=container> <div class=navbar-header> <button class="navbar-toggle collapsed" type=button data-toggle=collapse data-target=#bs-navbar aria-controls=bs-navbar aria-expanded=false> <span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a href=../ class=navbar-brand>Bootstrap</a> </div> <nav id=bs-navbar class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li> <a href="../getting-started/">Getting started</a> </li> <li> <a href="../css/">CSS</a> </li> <li> <a href="../components/">Components</a> </li> <li> <a href="../javascript/">JavaScript</a> </li> <li> <a href="../customize/">Customize</a> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href=http://themes.getbootstrap.com onclick="ga(&quot;send&quot;,&quot;event&quot;,&quot;Navbar&quot;,&quot;Community links&quot;,&quot;Themes&quot;)">Themes</a></li> <li><a href=http://expo.getbootstrap.com onclick="ga(&quot;send&quot;,&quot;event&quot;,&quot;Navbar&quot;,&quot;Community links&quot;,&quot;Expo&quot;)">Expo</a></li> <li><a href=http://blog.getbootstrap.com onclick="ga(&quot;send&quot;,&quot;event&quot;,&quot;Navbar&quot;,&quot;Community links&quot;,&quot;Blog&quot;)">Blog</a></li> </ul> </nav> </div> </header> <div class=bs-docs-header id=content tabindex=-1> <div class=container> <h1>Wall of browser bugs</h1> <p>A list of the browser bugs that Bootstrap is currently grappling with.</p> <div id=carbonads-container><div class=carbonad><div id=azcarbon></div><script>var z=document.createElement("script");z.async=!0,z.src="http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(z,s);</script></div></div></div></div><div class="container bs-docs-container"> <div class=row> <div class=col-md-12 role=main> <div class=bs-docs-section> <h1 id=browser-bugs class=page-header>Browser bugs</h1> <p class=lead>Bootstrap currently works around several outstanding browser bugs in major browsers to deliver the best cross-browser experience possible. Some bugs, like those listed below, cannot be solved by us.</p> <p>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> <p>See also:</p> <ul> <li><a href="https://code.google.com/p/chromium/issues/detail?id=536263">Chromium issue 536263: [meta] Issues affecting Bootstrap</a></li> <li><a href=https://docs.google.com/document/d/1LPaPA30bLUB_publLIMF0RlhdnPx_ePXm7oW02iiT6o>jQuery's browser bug workarounds</a></li> </ul> <div class=table-responsive> <table class="bs-docs-browser-bugs table table-bordered table-hover"> <thead> <tr> <th>Browser(s)</th> <th>Summary of bug</th> <th>Upstream bug(s)</th> <th>Bootstrap issue(s)</th> </tr> </thead> <tbody> <tr> <td>Internet Explorer 11 & Microsoft Edge </td> <td><p>Hovered element still remains in <code class=highlighter-rouge>:hover</code> state after scrolling away.</p> </td> <td><a href=https://connect.microsoft.com/IE/feedback/details/926665>IE bug #926665</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14211>#14211</a> </td> </tr> <tr> <td>Internet Explorer 11 & Microsoft Edge </td> <td><p>When hovering over a <code class=highlighter-rouge>&lt;select&gt;</code> menu item, the cursor for the element underneath the menu is displayed.</p> </td> <td><a href=https://connect.microsoft.com/IE/feedback/details/963961>IE bug #963961</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14528>#14528</a> </td> </tr> <tr> <td>Internet Explorer 11 & Microsoft Edge </td> <td><p>CSS <code class=highlighter-rouge>border-radius</code> sometimes causes lines of bleed-through of the <code class=highlighter-rouge>background-color</code> of the parent element.</p> </td> <td><a href=https://connect.microsoft.com/IE/feedback/details/1463734>IE bug #1463734</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16671>#16671</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>.table-bordered</code> with an empty <code class=highlighter-rouge>&lt;tbody&gt;</code> is missing borders.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1023761">Mozilla bug #1023761</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/13453>#13453</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>max-width: 100%;</code> doesn’t work inside tables.</p> </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>#10690</a> </td> </tr> <tr> <td>Firefox </td> <td><p>Button elements with <code class=highlighter-rouge>width: 100%</code> become cropped in long tables.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1060131">Mozilla bug #1060131</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14320>#14320</a> </td> </tr> <tr> <td>Firefox </td> <td><p>If the disabled state of a form control is changed via JavaScript, the normal state doesn’t return after refreshing the page.</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=654072">Mozilla bug #654072</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/793>#793</a> </td> </tr> <tr> <td>Firefox </td> <td><p><code class=highlighter-rouge>focus</code> events should not be fired at the <code class=highlighter-rouge>document</code> object</p> </td> <td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1228802">Mozilla bug #1228802</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/18365>#18365</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Clicking above <code class=highlighter-rouge>&lt;input type="number"&gt;</code> increment button flashes the decrement button.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=419108">Chromium issue #419108</a> </td> <td>Offshoot of <a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a> & <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Chrome (OS X) </td> <td><p>Caps Lock indicator not shown in <code class=highlighter-rouge>&lt;input type="password"&gt;</code> with <code class=highlighter-rouge>display: block</code></p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=460200">Chromium issue #460200</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15832>#15832</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Focus ring of image map within a modal is displayed in the wrong location.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=475128">Chromium issue #475128</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16180>#16180</a> </td> </tr> <tr> <td>Chrome </td> <td><p>Incorrect viewport size used for media queries when printing.</p> </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>#12078</a> </td> </tr> <tr> <td>Chrome </td> <td><p>CSS infinite linear animation with alpha transparency leaks memory.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=429375">Chromium issue #429375</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14409>#14409</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>:focus</code> <code class=highlighter-rouge>outline</code> style causes cursor to not be displayed when toggling a <code class=highlighter-rouge>readonly</code> <code class=highlighter-rouge>&lt;input&gt;</code> to read-write.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=465274">Chromium issue #465274</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16022>#16022</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>width: 1%</code> on nested table cell causes its table to hog horizontal space.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=427994">Chromium issue #427994</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16372>#16372</a> </td> </tr> <tr> <td>Chrome </td> <td><p><code class=highlighter-rouge>table-cell</code> borders not overlapping despite <code class=highlighter-rouge>margin-right: -1px</code></p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=534750">Chromium issue #534750</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/17438>#17438</a>, <a href=https://github.com/twbs/bootstrap/issues/14237>#14237</a> </td> </tr> <tr> <td>Chrome (Windows & Linux) </td> <td><p>Animation glitch when returning to inactive tab after animations occurred while tab was hidden.</p> </td> <td><a href="https://code.google.com/p/chromium/issues/detail?id=449180">Chromium issue #449180</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/15298>#15298</a> </td> </tr> <tr> <td>Safari </td> <td><p><code class=highlighter-rouge>width: 1%</code> on nested table cell causes its table to hog horizontal space.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=144696">WebKit bug #144696</a>, <a href=https://openradar.appspot.com/20839572>Apple Safari Radar #20839572</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16372>#16372</a> </td> </tr> <tr> <td>Safari </td> <td><p>Incorrect placement of <code class=highlighter-rouge>position: fixed</code> element when it’s a child of a <code class=highlighter-rouge>position: relative; left: X%;</code> element.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=147284">WebKit bug #147284</a>, <a href=https://openradar.appspot.com/21993128>Apple Safari Radar #21993128</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16814>#16814</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Scrollbar clipped in <code class=highlighter-rouge>select[multiple]</code> with padding.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=128489">WebKit bug #128489</a>, <a href=https://openradar.appspot.com/19208483>Apple Safari Radar #19208483</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/12536>#12536</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Weird button behavior with some <code class=highlighter-rouge>&lt;input type="number"&gt;</code> elements.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=137269">WebKit bug #137269</a>, <a href=https://openradar.appspot.com/18834768>Apple Safari Radar #18834768</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/8350>#8350</a>, <a href=https://github.com/necolas/normalize.css/issues/283>Normalize #283</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=337668">Chromium issue #337668</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Small font size when printing webpage with fixed-width <code class=highlighter-rouge>.container</code>.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138192">WebKit bug #138192</a>, <a href=https://openradar.appspot.com/19435018>Apple Safari Radar #19435018</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14868>#14868</a> </td> </tr> <tr> <td>Safari (OS X) </td> <td><p>Focus ring of image map within a modal is displayed in the wrong location.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=143527">WebKit bug #143527</a>, <a href=https://openradar.appspot.com/21908735>Apple Safari Radar #21908735</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16180>#16180</a> </td> </tr> <tr> <td>Safari (iPad) </td> <td><p><code class=highlighter-rouge>&lt;select&gt;</code> menu on iPad causes shifting of hit-testing areas</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150079">WebKit bug #150079</a>, <a href=https://openradar.appspot.com/23082521>Apple Safari Radar #23082521</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14975>#14975</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>transform: translate3d(0,0,0);</code> rendering bug.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138162">WebKit bug #138162</a>, <a href=https://openradar.appspot.com/18804973>Apple Safari Radar #18804973</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14603>#14603</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Text input’s cursor doesn’t move while scrolling the page.</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a>, <a href=https://openradar.appspot.com/18819624>Apple Safari Radar #18819624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/14708>#14708</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p>Can’t move cursor to start of text after entering long string of text into <code class=highlighter-rouge>&lt;input type="text"&gt;</code></p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=148061">WebKit bug #148061</a>, <a href=https://openradar.appspot.com/22299624>Apple Safari Radar #22299624</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/16988>#16988</a> </td> </tr> <tr> <td>Safari (iOS) </td> <td><p><code class=highlighter-rouge>display: block</code> causes text of temporal <code class=highlighter-rouge>&lt;input&gt;</code>s to become vertically misaligned</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=139848">WebKit bug #139848</a>, <a href=https://openradar.appspot.com/19434878>Apple Safari Radar #19434878</a> </td> <td><a href=https://github.com/twbs/bootstrap/issues/11266>#11266</a>, <a href=https://github.com/twbs/bootstrap/issues/13098>#13098</a> </td> </tr> <tr> <td>Safari (iOS 9+) </td> <td><p>Sometimes excessive automatic zoom is applied after opening a modal, and the user isn’t allowed to zoom out</p> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=150715">WebKit bug #150715</a> </td> <td><a href="https://bugs.webkit.org/show_bug.cgi?id=138201">WebKit bug #138201</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> <footer class=bs-docs-footer role=contentinfo> <div class=container> <ul class=bs-docs-footer-links> <li><a href=https://github.com/twbs/bootstrap>GitHub</a></li> <li><a href=https://twitter.com/getbootstrap>Twitter</a></li> <li><a href=../getting-started/#examples>Examples</a></li> <li><a href="../about/">About</a></li> </ul> <p>Designed and built with all the love in the world by <a href=https://twitter.com/mdo target=_blank>@mdo</a> and <a href=https://twitter.com/fat target=_blank>@fat</a>. Maintained by the <a href=https://github.com/orgs/twbs/people>core team</a> with the help of <a href=https://github.com/twbs/bootstrap/graphs/contributors>our contributors</a>.</p> <p>Code licensed <a rel=license href=https://github.com/twbs/bootstrap/blob/master/LICENSE target=_blank>MIT</a>, docs <a rel=license href=https://creativecommons.org/licenses/by/3.0/ target=_blank>CC BY 3.0</a>.</p> </div> </footer> <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script><script>window.jQuery||document.write('<script src="../assets/js/vendor/jquery.min.js"><\/script>');</script><script src=../dist/js/bootstrap.min.js></script><script src=../assets/js/docs.min.js></script><script src=../assets/js/ie10-viewport-bug-workaround.js></script><script>var _gauges=_gauges||[];!function(){var e=document.createElement("script");e.async=!0,e.id="gauges-tracker",e.setAttribute("data-site-id","4f0dc9fef5a1f55508000013"),e.src="//secure.gaug.es/track.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}();</script></body></html>
Reference in New Issue View Git Blame Copy Permalink