Browsers e dispositivos

Aprenda sobre os browsers e dispositivos (dos modernos até os antigos) que suportam o Bootstrap, incluindo quirks e bugs conhecidos, em cada.

Suporte de browsers

Bootstrap é suportado pelas versões mais recentes e estáveis dos maiores navegadores e plataformas. No Windows, somos suportados pelo Internet Explorer 10, 11 e Microsoft Edge.

Navegadores alternativos que usam a versão mais recente do WebKit, Blink ou Gecko (tanto diretamente, quanto através da API web view da plataforma) não suportam explicitamente o Bootstrap. Contudo, o framework funciona normalmente (na maioria dos casos) nesses browsers. Informações mais específicas a respeito estão abaixo.

Você pode consultar nosso leque de browsers com suporte e suas versões no nosso package.json:

"browserslist": [
  "last 1 major version",
  ">= 1%",
  "Chrome >= 45",
  "Firefox >= 38",
  "Edge >= 12",
  "Explorer >= 10",
  "iOS >= 9",
  "Safari >= 9",
  "Android >= 4.4",
  "Opera >= 30"
]

Nós usamos o Autoprefixer para obter o suporte esperado (usando prefixos CSS), o qual usa Browserslist para gerenciar as versões destes navegadores.

Dispositivos móveis

No geral, Bootstrap é suportado pelas versões mais recentes das maiores plataformas padrões dos browsers. No entanto, lembre-se que proxy browsers (como o Opera Mini, modo turbo do Opera Mobile, UC Browser Mini, Amazon Silk) não são suportados.

Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android Suportado Suportado N/A Android v5.0+ Suportado Suportado
iOS Suportado Suportado Suportado N/A Suportado
Windows 10 Móvel N/A N/A N/A N/A Suportado

Browsers desktop

De forma parecida, as versões mais recentes da maioria dos navegadores desktops são suportadas.

Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac Suportado Suportado N/A N/A Suportado Suportado
Windows Suportado Suportado Suportado, IE10+ Suportado Suportado Not Suportado

No Firefox, em adição ao release mais recente e estável, nós também temos suporte da recente versão “Extended Support Release (ESR)”.

Não oficialmente, Bootstrap vai se apresentar e comportar bem no Chromium, Chrome e Firefox para Linux, além do Internet Explorer 9 (apesar de não termos suporte oficial).

Para consultar alguns bugs que o Bootstrap enfrenta, veja nosso Mural de bugs.

Internet Explorer

Do Internet Explorer 10 acima, nós temos suporte. No entanto, do IE9 para baixo, não temos. Portanto, esteja atento que algumas propriedades CSS3 e elementos HTML5 não são, totalmente, suportadas no IE10 ou requerem prefixos para compatilidade. Visite o site Can I use… para detalhes sobre suporte CSS3 em browsers e recursos HTML5.

Se você precisa de suporte no IE8 ou 9, use o Bootstrap 3. É a versão mais estável do nosso código e nosso time ainda dá suporte para reparar bugs críticos e alterar a documentação. Contudo, nem um recurso novo será adicionado a ela.

Modais e dropdowns em dispositivos móveis

Overflow e rolagem

Suporte para overflow: hidden; no elemento <body> é um pouco limitado, no iOS e Android. Nesse sentido, quando você rola perto da parte superior ou inferior do modal (em algum dos browsers destes dispositivos), o conteúdo do <body> vai começar a rolar. Veja o bug do Chrome #175502 (reparado no Chrome v40) e o bug Webkit #153852.

Campos de texto e rolagem no iOS

A partir do iOS 9.2, enquanto o modal está aberto, se o toque inicial do gesto de rolagem está dentro dos limites de um <input> de texto ou <textarea>, o conteúdo do <body> abaixo do modal vai ser rolado, invés do modal. Veja o bug Webkit #153856.

O elemento .dropdown-backdrop não é usando no iOS, por causa da complexidade do z-index. Portanto, para fechar dropdowns em navbars, você deve clicar diretamente no elemento dropdown ou qualquer outro elemento que vai acionar o evento de clique no iOS).

Zoom em browsers

Dar zoom em páginas irá mostrar, inevitavelmente, artefatos de renderização em alguns componentes, tanto no Bootstrap quando no resto da web. Dependendo do problema, poderemos consertá-lo, bastando pesquisar antes e depois abrir um issue (se necessário). Contudo, nós tendemos a ignorar estes problemas, já que eles não possuem soluções diretas, aléms de hacks, normalmente.

Sticky :hover/:focus no iOS

Enquanto o :hover não é possível na maioria dos dispositivos de toque, o iOS emula este comportamento, resultando em estilos que persistem depois de soltar um elemento. Estes estilos hover só são interrompidos quando o usuário toca outro elemento. Este comportamento é considerado, largamente, indesejável e aparenta não ser um problema nos dispositivos Android ou Windows.

Durante nossos realeases v4 alpha e beta, nós incluímos códigos incompletos e comentados para dar a opção de usar uma media query que desativaria estilos hover em dispositivos de toque que emulam estes estilos. Isto nunca foi finalizado ou ativado, mas para evitar quebra total, nós optamos em defazar isto e manter os mixins como atalhos para as pseudo-classes.

Impressão

Mesmo em alguns browsers modernos, imprimir pode ser bem chatinho.

A partir do Safari v8.0, o uso da classe .container pode levar o Safari a usar pequenos tamanhos de fontes, quando imprimindo. Veja o issue #14868 e WebKit bug #138192, para mais detalhes. Uma possível solução alternativa é o seguinte CSS:

@media print {
  .container {
    width: auto;
  }
}

Browser padrão do Android

O Android 4.1 e algumas versões mais recentes são lançadas com um app Browser padrão, que não é o Chrome. Infelizmente, o app Browser tem muitos bugs e inconsistências com CSS.

Em elementos <select>, o app Browser não irá mostrar os controles laterais se houver border-radius ou border aplicadas (veja esta questão no StackOverflow, para mais detalhes). Use o snippet abaixo para remover o CSS problemático e renderizar o <select> como um elemento não estilizado, no app Browser do Android. O sniffer do user agent evita interferência com o Chrome, Safari e navegadores Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

Quer ver um exemplo? Veja esta demo no JS Bin.

Validação

Pensando em dar a melhor experiência para os antigos e bugados browsers, Bootstrap usa hacks CSS em diversos locais para conseguir um CSS único em algumas versões de browsers e, consequentemente, trabalhar em cima dos próprios bugs. Estes hacks, compreensivelmente, levam os validadores CSS a falarem que o código está inválido. Em outros locais, nós também usamos recursos CSS inovadores que ainda não foram padronizados. No entanto, eles são usados puramente para progressive enhancement.

Estes avisos de validação não significam nada na prática, já que a parte sem hacks valida normalmente e a parte com hacks não interfere no funcionamente da parte sem hacks. Portanto, se ignorarmos estes avisos, a parte com hacks é usada em progressive enhancement.

Nossa documentação HTML, da mesma forma tem alguns avisos de validação triviais e inconsequentes, devido a inclusão de uma solução para um certo bug no Firefox.