mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 22:27:09 +03:00
1926 lines
55 KiB
HTML
1926 lines
55 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
|
||
<title>
|
||
|
||
Wall of browser bugs · Bootstrap Material Design
|
||
|
||
</title>
|
||
|
||
<!-- Twitter -->
|
||
<meta name="twitter:site" content="@FezVrasta">
|
||
<meta name="twitter:creator" content="@FezVrasta">
|
||
|
||
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="Wall of browser bugs">
|
||
<meta name="twitter:description" content="">
|
||
<meta name="twitter:image" content="https://fezvrasta.github.io/assets/brand/bootstrap-social-logo.png">
|
||
|
||
|
||
<!-- Facebook -->
|
||
|
||
<meta property="og:url" content="https://fezvrasta.github.io/docs/4.0/browser-bugs/">
|
||
<meta property="og:title" content="Wall of browser bugs">
|
||
<meta property="og:description" content="">
|
||
<meta property="og:type" content="website">
|
||
|
||
<meta property="og:image" content="http://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:secure_url" content="https://fezvrasta.github.io/assets/brand/bootstrap-social.png">
|
||
<meta property="og:image:type" content="image/png">
|
||
<meta property="og:image:width" content="1200">
|
||
<meta property="og:image:height" content="630">
|
||
|
||
<!-- Meta -->
|
||
<meta name="description" content="The most popular HTML, CSS, and JS Material Design library in the world.">
|
||
<meta name="author" content="Federico Zivolo and Bootstrap contributors">
|
||
|
||
|
||
<!-- Bootstrap core CSS -->
|
||
|
||
<link href="/bootstrap-material-design/dist/css/bootstrap-material-design.css" rel="stylesheet">
|
||
|
||
|
||
<!-- Documentation extras -->
|
||
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||
|
||
<link href="/bootstrap-material-design/assets/css/docs.min.css" rel="stylesheet">
|
||
|
||
<!-- Favicons -->
|
||
<link rel="apple-touch-icon" href="/bootstrap-material-design/apple-touch-icon.png">
|
||
<link rel="icon" href="/bootstrap-material-design/favicon.ico">
|
||
|
||
<script>
|
||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||
ga('create', 'UA-146052-10', 'getbootstrap.com');
|
||
ga('send', 'pageview');
|
||
</script>
|
||
|
||
</head>
|
||
<body class="bd-docs" data-spy="scroll" data-target=".bd-sidenav-active">
|
||
<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>
|
||
|
||
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
||
<a class="navbar-brand mr-0 mr-md-2" href="/bootstrap-material-design/" aria-label="Bootstrap">
|
||
<svg class="d-block" width="36" height="36" viewbox="0 0 612 612" xmlns="http://www.w3.org/2000/svg" focusable="false"><title>Bootstrap</title><path fill="currentColor" d="M510 8a94.3 94.3 0 0 1 94 94v408a94.3 94.3 0 0 1-94 94H102a94.3 94.3 0 0 1-94-94V102a94.3 94.3 0 0 1 94-94h408m0-8H102C45.9 0 0 45.9 0 102v408c0 56.1 45.9 102 102 102h408c56.1 0 102-45.9 102-102V102C612 45.9 566.1 0 510 0z"/><path fill="currentColor" d="M196.77 471.5V154.43h124.15c54.27 0 91 31.64 91 79.1 0 33-24.17 63.72-54.71 69.21v1.76c43.07 5.49 70.75 35.82 70.75 78 0 55.81-40 89-107.45 89zm39.55-180.4h63.28c46.8 0 72.29-18.68 72.29-53 0-31.42-21.53-48.78-60-48.78h-75.57zm78.22 145.46c47.68 0 72.73-19.34 72.73-56s-25.93-55.37-76.46-55.37h-74.49v111.4z"/></svg>
|
||
|
||
</a>
|
||
|
||
<div class="navbar-nav-scroll">
|
||
<ul class="navbar-nav bd-navbar-nav flex-row">
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/bootstrap-material-design/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Bootstrap');">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="/bootstrap-material-design/docs/4.0/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link " href="/bootstrap-material-design/docs/4.0/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-dashboard-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Dashboard Pro');" target="_blank" rel="noopener">Material Dashboard</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://www.creative-tim.com/product/material-kit-pro?affiliate_id=87385" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Material Kit Pro');" target="_blank" rel="noopener">Material Kit</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
v4.0
|
||
</a>
|
||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
|
||
<a class="dropdown-item active" href="/bootstrap-material-design/docs/4.0/">Latest (4.x)</a>
|
||
<a class="dropdown-item" href="https://v4-alpha.getbootstrap.com">v4 Alpha 6</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/3.3.7/">v3.3.7</a>
|
||
<a class="dropdown-item" href="https://getbootstrap.com/2.3.2/">v2.3.2</a>
|
||
</div>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://github.com/FezVrasta/bootstrap-material-design" target="_blank" rel="noopener" aria-label="GitHub">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false"><title>GitHub</title><path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://twitter.com/FezVrasta" target="_blank" rel="noopener" aria-label="Twitter">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 416.32" focusable="false"><title>Twitter</title><path d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link p-2" href="https://bootstrap-slack.herokuapp.com" target="_blank" rel="noopener" aria-label="Slack">
|
||
<svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" focusable="false"><title>Slack</title><path fill="currentColor" d="M210.787 234.832l68.31-22.883 22.1 65.977-68.309 22.882z"/><path d="M490.54 185.6C437.7 9.59 361.6-31.34 185.6 21.46S-31.3 150.4 21.46 326.4 150.4 543.3 326.4 490.54 543.34 361.6 490.54 185.6zM401.7 299.8l-33.15 11.05 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.38-68.36 22.92 11.46 34.38c4.5 13.92-2.87 29.06-16.78 33.56-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18l-11.46-34.43-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.5-13.92 2.87-29.06 16.78-33.56l33.12-11.03-22.1-65.9-33.15 11.05c-2.87.82-6.14 1.64-9 1.23a27.32 27.32 0 0 1-24.56-18c-4.48-13.93 2.89-29.07 16.81-33.58l33.15-11.05-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.46 34.38 68.36-22.92-11.46-34.38c-4.5-13.92 2.87-29.06 16.78-33.56s29.06 2.87 33.56 16.78l11.47 34.42 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.87 29.06-16.78 33.56L329.7 194.6l22.1 65.9 33.15-11.05c13.92-4.5 29.06 2.87 33.56 16.78s-2.88 29.07-16.81 33.57z" fill="currentColor"/></svg>
|
||
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="https://github.com/FezVrasta/bootstrap-material-design/releases">Download</a>
|
||
</header>
|
||
|
||
|
||
<div class="container-fluid">
|
||
<div class="row flex-xl-nowrap">
|
||
<div class="col-12 col-md-3 col-xl-2 bd-sidebar">
|
||
<form class="bd-search d-flex align-items-center">
|
||
<input type="search" class="form-control" id="search-input" placeholder="Search..." aria-label="Search for..." autocomplete="off">
|
||
<button class="btn-link bd-search-docs-toggle d-md-none p-0 ml-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs avigation">
|
||
<svg class="" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 30 30" width="30" height="30" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg>
|
||
|
||
</button>
|
||
</form>
|
||
|
||
<nav class="collapse bd-links" id="bd-docs-nav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Getting started
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/introduction/">
|
||
Introduction
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/download/">
|
||
Download
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/contents/">
|
||
Contents
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/">
|
||
Browsers & devices
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/javascript/">
|
||
JavaScript
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/options/">
|
||
Options
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/build-tools/">
|
||
Build tools
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/webpack/">
|
||
Webpack
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/getting-started/accessibility/">
|
||
Accessibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Layout
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/overview/">
|
||
Overview
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/grid/">
|
||
Grid
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/media-object/">
|
||
Media object
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/layout/utilities-for-layout/">
|
||
Utilities for layout
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Content
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/reboot/">
|
||
Reboot
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/typography/">
|
||
Typography
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/code/">
|
||
Code
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/images/">
|
||
Images
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/tables/">
|
||
Tables
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/content/figures/">
|
||
Figures
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Components
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/alerts/">
|
||
Alerts
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/badge/">
|
||
Badge
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/breadcrumb/">
|
||
Breadcrumb
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/button-group/">
|
||
Button group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/card/">
|
||
Card
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/carousel/">
|
||
Carousel
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/collapse/">
|
||
Collapse
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/dropdowns/">
|
||
Dropdowns
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/input-group/">
|
||
Input group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/jumbotron/">
|
||
Jumbotron
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/list-group/">
|
||
List group
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/modal/">
|
||
Modal
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/navbar/">
|
||
Navbar
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/pagination/">
|
||
Pagination
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/popovers/">
|
||
Popovers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/progress/">
|
||
Progress
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/scrollspy/">
|
||
Scrollspy
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/components/tooltips/">
|
||
Tooltips
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Material Design
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/buttons/">
|
||
Buttons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/collapse-inline/">
|
||
Collapse inline
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/drawers/">
|
||
Drawers
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/extensions/">
|
||
Extensions
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/forms/">
|
||
Forms
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/labels/">
|
||
Labels
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/list-groups/">
|
||
List groups
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/menus/">
|
||
Menus
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/navs/">
|
||
Navs
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/selections/">
|
||
Selections
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/material-design/snackbars/">
|
||
Snackbars
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Utilities
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/borders/">
|
||
Borders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/clearfix/">
|
||
Clearfix
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/close-icon/">
|
||
Close icon
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/colors/">
|
||
Colors
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/display/">
|
||
Display
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/embed/">
|
||
Embed
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/flex/">
|
||
Flex
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/float/">
|
||
Float
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/image-replacement/">
|
||
Image replacement
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/position/">
|
||
Position
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/screenreaders/">
|
||
Screenreaders
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/sizing/">
|
||
Sizing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/spacing/">
|
||
Spacing
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/text/">
|
||
Text
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/vertical-align/">
|
||
Vertical align
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/utilities/visibility/">
|
||
Visibility
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Extend
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="">
|
||
<a href="/bootstrap-material-design/docs/4.0/extend/icons/">
|
||
Icons
|
||
</a>
|
||
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<div class="bd-toc-item ">
|
||
<a class="bd-toc-link" href="/bootstrap-material-design/docs/4.0/migration/">
|
||
Migration
|
||
</a>
|
||
|
||
<ul class="nav bd-sidenav">
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">
|
||
<h1 class="bd-title" id="content">Wall of browser bugs</h1>
|
||
<p class="bd-lead"></p>
|
||
<script async type="text/javascript" src="https://cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fezvrastagithubiobootstrapmateri" id="_carbonads_js"></script>
|
||
|
||
<p>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="/bootstrap-material-design/docs/4.0/getting-started/browsers-devices/#supported-browsers">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://bugzilla.mozilla.org/show_bug.cgi?id=1230801">Mozilla bug 1230801: Fix the issues that affect Bootstrap</a></li>
|
||
<li><a href="https://bugs.webkit.org/show_bug.cgi?id=159753">WebKit bug 159753: [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>
|
||
|
||
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
|
||
<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>Edge
|
||
</td>
|
||
<td><p>Visual artifacts in scrollable modal dialogs</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9011176">Edge issue #9011176</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20755">#20755</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Native browser tooltip for <code class="highlighter-rouge">title</code> shows on first keyboard focus (in addition to custom tooltip component)</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6793560">Edge issue #6793560</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18692">#18692</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>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://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5381673">Edge issue #5381673</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/14211">#14211</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>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://developer.microsoft.com/en-us/microsoft-edge/platform/issues/3342037">Edge issue #3342037</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/16671">#16671</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">background</code> of <code class="highlighter-rouge"><tr></code> is only applied to first child cell instead of all cells in the row</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5865620">Edge issue #5865620</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18504">#18504</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">@-ms-viewport{width: device-width;}</code> has side-effect of making scrollbars auto-hide</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7165383">Edge issue #7165383</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18543">#18543</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Background color from lower layer bleeds through transparent border in some cases</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/6274505">Edge issue #6274505</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18228">#18228</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Hovering over descendant SVG element fires <code class="highlighter-rouge">mouseleave</code> event at ancestor</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7787318">Edge issue #7787318</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Active <code class="highlighter-rouge">position: fixed;</code> <code class="highlighter-rouge"><button></code> flickers when scrolling</p>
|
||
</td>
|
||
<td><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8770398">Edge issue #8770398</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20507">#20507</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">.table-bordered</code> with an empty <code class="highlighter-rouge"><tbody></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>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>Firefox
|
||
</td>
|
||
<td><p>Wide floated table doesn’t wrap onto new line</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1277782">Mozilla bug #1277782</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19839">#19839</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p>Mouse sometimes not within element for purposes of <code class="highlighter-rouge">mouseenter</code>/<code class="highlighter-rouge">mouseleave</code> when it’s within SVG elements</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=577785">Mozilla bug #577785</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19670">#19670</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p>Layout with floated columns breaks when printing</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315994">Mozilla bug #1315994</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/21092">#21092</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox (Windows)
|
||
</td>
|
||
<td><p>Right border of <code class="highlighter-rouge"><select></code> menu is sometimes missing when screen is set to uncommon resolution</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=545685">Mozilla bug #545685</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/15990">#15990</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox (OS X & Linux)
|
||
</td>
|
||
<td><p>Badge widget causes bottom border of Tabs widget to unexpectedly not overlap</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1259972">Mozilla bug #1259972</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19626">#19626</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome (Android)
|
||
</td>
|
||
<td><p>Tapping on an <code class="highlighter-rouge"><input></code> in a scrollable overlay doesn’t scroll the <code class="highlighter-rouge"><input></code> into view</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=595210">Chromium issue #595210</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17338">#17338</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome (OS X)
|
||
</td>
|
||
<td><p>Clicking above <code class="highlighter-rouge"><input type="number"></code> increment button flashes the decrement button.</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/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://bugs.chromium.org/p/chromium/issues/detail?id=337668">Chromium issue #337668</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p>CSS infinite linear animation with alpha transparency leaks memory.</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/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">table-cell</code> borders not overlapping despite <code class="highlighter-rouge">margin-right: -1px</code></p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=568691">Chromium issue #568691</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
|
||
</td>
|
||
<td><p>Clicking scrollbar in <code class="highlighter-rouge"><select multiple></code> with overflowed options will select nearby <code class="highlighter-rouge"><option></code></p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=597642">Chromium issue #597642</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19810">#19810</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=370155">Chromium issue #370155</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">position: absolute</code> element that’s wider than its column is incorrectly clipped to column boundary</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=269061">Chromium issue #269061</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20161">#20161</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://bugs.chromium.org/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">rem</code> units in media queries should be calculated using <code class="highlighter-rouge">font-size: initial</code>, not the root element’s <code class="highlighter-rouge">font-size</code></p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=156684">WebKit bug #156684</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari
|
||
</td>
|
||
<td><p>Link to container with id and tabindex results in container being ignored by VoiceOver (affects skip links)</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=163658">WebKit bug #163658</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (OS X)
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">px</code>, <code class="highlighter-rouge">em</code>, and <code class="highlighter-rouge">rem</code> should all behave the same in media queries when page zoom is applied</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=156687">WebKit bug #156687</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17403">#17403</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (OS X)
|
||
</td>
|
||
<td><p>Weird button behavior with some <code class="highlighter-rouge"><input type="number"></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://bugs.chromium.org/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 (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"><input type="text"></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"><input></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)
|
||
</td>
|
||
<td><p>Tapping on <code class="highlighter-rouge"><body></code> doesn’t fire <code class="highlighter-rouge">click</code> events</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=151933">WebKit bug #151933</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/16028">#16028</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p><code class="highlighter-rouge">position:fixed</code> is incorrectly positioned when tab bar is visible on iPhone 6S+ Safari</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=153056">WebKit bug #153056</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18859">#18859</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p>Tapping into an <code class="highlighter-rouge"><input></code> within a <code class="highlighter-rouge">position:fixed</code> element scrolls to the top of the page</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=153224">WebKit bug #153224</a>, <a href="https://openradar.appspot.com/24235301">Apple Safari Radar #24235301</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17497">#17497</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p><code class="highlighter-rouge"><body></code> with <code class="highlighter-rouge">overflow:hidden</code> CSS is scrollable on iOS</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=153852">WebKit bug #153852</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p>Scroll gesture in text field in <code class="highlighter-rouge">position:fixed</code> element sometimes scrolls <code class="highlighter-rouge"><body></code> instead of scrollable ancestor</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=153856">WebKit bug #153856</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/14839">#14839</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p>Modal with <code class="highlighter-rouge">-webkit-overflow-scrolling: touch</code> doesn’t become scrollable after added text makes it taller</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=158342">WebKit bug #158342</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17695">#17695</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p>Don’t make <code class="highlighter-rouge">:hover</code> sticky on touch-friendly webpages</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=158517">WebKit bug #158517</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/12832">#12832</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iOS)
|
||
</td>
|
||
<td><p>Element which is <code class="highlighter-rouge">position:fixed</code> disappears after opening a <code class="highlighter-rouge"><select></code> menu</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=162362">WebKit bug #162362</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20759">#20759</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari (iPad Pro)
|
||
</td>
|
||
<td><p>Rendering of descendants of <code class="highlighter-rouge">position: fixed</code> element gets clipped on iPad Pro in Landscape orientation</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=152637">WebKit bug #152637</a>, <a href="https://openradar.appspot.com/24030853">Apple Safari Radar #24030853</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/18738">#18738</a>
|
||
</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
<h1 id="most-wanted-features">Most wanted features</h1>
|
||
|
||
<p>There are several features specified in Web standards which would allow us to make Bootstrap more robust, elegant, or performant, but aren’t yet implemented in certain browsers, thus preventing us from taking advantage of them.</p>
|
||
|
||
<p>We publicly list these “most wanted” feature requests here, in the hopes of expediting the process of getting them implemented.</p>
|
||
|
||
<table class="bd-browser-bugs table table-bordered table-hover table-responsive">
|
||
<thead>
|
||
<tr>
|
||
<th>Browser(s)</th>
|
||
<th>Summary of feature</th>
|
||
<th>Upstream issue(s)</th>
|
||
<th>Bootstrap issue(s)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Focusable elements should fire focus event / receive :focus styling when they receive Narrator/accessibility focus</p>
|
||
</td>
|
||
<td><a href="https://microsoftaccessibility.uservoice.com/forums/307429-microsoft-accessibility-feedback/suggestions/16717318">Microsoft A11y UserVoice idea #16717318</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||
</td>
|
||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/12299532">Edge UserVoice idea #12299532</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Implement <a href="http://html5please.com/#position:sticky">sticky positioning</a> from CSS Positioned Layout Level 3</p>
|
||
</td>
|
||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6263621">Edge UserVoice idea #6263621</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/17021">#17021</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||
</td>
|
||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6508895">Edge UserVoice idea #6508895</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||
</td>
|
||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15939898">Edge UserVoice idea #15939898</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Edge
|
||
</td>
|
||
<td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||
</td>
|
||
<td><a href="https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/15944476">Edge UserVoice idea #15944476</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=854148">Mozilla bug #854148</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=840640">Mozilla bug #840640</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Firefox
|
||
</td>
|
||
<td><p>When virtual focus is on a button or link, fire actual focus on the element, too</p>
|
||
</td>
|
||
<td><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1000082">Mozilla bug #1000082</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20732">#20732</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=642487">Chromium issue #642487</a>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=437860">Chromium issue #437860</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p>Implement the <a href="http://caniuse.com/#feat=css-nth-child-of"><code class="highlighter-rouge">of <selector-list></code> clause</a> of the <code class="highlighter-rouge">:nth-child()</code> pseudo-class</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=304163">Chromium issue #304163</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20143">#20143</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Chrome
|
||
</td>
|
||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||
</td>
|
||
<td><a href="https://bugs.chromium.org/p/chromium/issues/detail?id=576815">Chromium issue #576815</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari
|
||
</td>
|
||
<td><p>Fire a <a href="https://developer.mozilla.org/en-US/docs/Web/Events/transitioncancel"><code class="highlighter-rouge">transitioncancel</code> event</a> when a CSS transition is canceled</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=161535">WebKit bug #161535</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20618">#20618</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari
|
||
</td>
|
||
<td><p>Implement the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:dir"><code class="highlighter-rouge">:dir()</code> pseudo-class</a> from Selectors Level 4</p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=64861">WebKit bug #64861</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/19984">#19984</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Safari
|
||
</td>
|
||
<td><p>Implement the HTML5 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog"><code class="highlighter-rouge"><dialog></code> element</a></p>
|
||
</td>
|
||
<td><a href="https://bugs.webkit.org/show_bug.cgi?id=84635">WebKit bug #84635</a>
|
||
</td>
|
||
<td><a href="https://github.com/twbs/bootstrap/issues/20175">#20175</a>
|
||
</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
|
||
<script>window.jQuery || document.write('<script src="/bootstrap-material-design/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/popper.min.js"></script>
|
||
|
||
|
||
<script src="/bootstrap-material-design/dist/js/bootstrap-material-design.js"></script>
|
||
|
||
|
||
|
||
<script src="/bootstrap-material-design/assets/js/vendor/anchor.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/clipboard.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/vendor/holder.min.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/src/application.js"></script>
|
||
|
||
|
||
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
|
||
<script src="/bootstrap-material-design/assets/js/ie10-viewport-bug-workaround.js"></script>
|
||
<script src="/bootstrap-material-design/assets/js/ie-emulation-modes-warning.js"></script>
|
||
|
||
|
||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||
<script type="text/javascript">
|
||
var docsearch = docsearch({
|
||
apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
|
||
indexName: 'bootstrap-v4',
|
||
inputSelector: '#search-input',
|
||
handleSelected: function (input, event, suggestion) {
|
||
var url = suggestion.url;
|
||
url = suggestion.isLvl1 ? url.split('#')[0]: url;
|
||
// If it's a title we remove the anchor so it does not jump.
|
||
window.location.href = url;
|
||
},
|
||
transformData: function (hits) {
|
||
return hits.map(function (hit) {
|
||
hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
|
||
return hit;
|
||
});
|
||
},
|
||
debug: false // Set debug to true if you want to inspect the dropdown
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
Holder.addTheme('gray', {
|
||
bg: '#777',
|
||
fg: 'rgba(255,255,255,.75)',
|
||
font: 'Helvetica',
|
||
fontweight: 'normal'
|
||
})
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|