9
respostas

Biblioteca materialize.min.css no Safari

Fala galera, tudo bem? Meu código do exercício ta funcionando perfeitamente, mas por curiosidade eu resolvi restar no safari e acabei tendo um problema... Chrome: http://imgur.com/haFf1Po Safari: http://imgur.com/FNISUWV Onde no safari, os ícones inseridos pela biblioteca, através da tag <i>, não funcionam. Alguém sabe me dizer o motivo?

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <title>Alura Typer</title>
    <link rel="stylesheet" href="css/libs/materialize.min.css">
    <link rel="stylesheet" href="css/libs/google-fonts.css">
    <link rel="stylesheet" href="css/estilos.css">
</head>

<body>
    <div class="container">
        <h1 class="center">Alura Typer</h1>
        <p class="frase">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed quam tempus, malesuada ligula et, sollicitudin enim. Integer iaculis tempor nisi, sed laoreet tellus pharetra sed. Integer dapibus sagittis mauris, vel imperdiet est facilisis non. Praesent rhoncus suscipit nunc eu volutpat. Morbi nibh odio, varius vitae quam lobortis, hendrerit facilisis lectus.</p>
        <ul class="informacoes center">
            <li>
                <i class="material-icons icones">description</i>
                <span id="tamanho_palavras">30</span> Palavras
            </li>
            <li>
                <i class="material-icons icones">query_builder</i>
                <span id="timer">3</span> Segundos
            </li>
        </ul>
        <textarea class="text-area" cols="30" rows="10"></textarea>
        <div class="botoes">
            <a class="btn-floating btn-large waves-effect waves-light red" id="botao-reset"><i class="material-icons">restore</i></a>
        </div>
        <ul class="center">
            <li><span id="contador-caracteres">0</span> Caracteres</li>
            <li>

                <span id="contador-palavras">0</span> Palavras
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>
9 respostas

https://github.com/google/material-design-lite/issues/4382

Talvez esse tópico te ajude.

Não entendi o que é para ser feito. =x

Bruno,

Já estou investigando o seu caso e já já posto uma solução para você, só um segundo.

Oi Bruno,

Eu testei aqui no Mac Sierra com o safari 10.1 e os ícones carregaram normalmente.

Qual versão do safari este problema está acontecendo ?

Meu OSX é o El Capitan - 10.11.6 e Safari é o 10.0.3. O erro nao se aplica só ao meu código, o código fornecido ao final do curso também da o mesmo erro.

Acredito que tenha algo a ver com isso, parece um pouco com algo dito no link que o Breno Prata mandou ali em cima. (Esses dois prints são do meu console) http://imgur.com/ThaSph8, http://imgur.com/cPmLGtW

Ele tá dizendo que não está achando os arquivos com as fontes dos ícones.

Você conferiu se na sua pasta alura-typer/public/fonts/roboto tem as fontes dentro dela ?

Dentro dessa pasta devem ter 20 itens, que são as fontes em diversos formatos diferentes.

Conferi sim, logo quando vi o erro cheguei a checar e testei com a ontem testei com a mesma pasta de gabarito do Alura, que fornece ao final do curso e deu o mesmo erro no safari, no console do chrome não apareceu nada.

print da pasta: http://imgur.com/gMnLTqc

print da pasta de font do localhost:3000/principal.html do gabarito: http://imgur.com/lCM8euh

printa da pasta de font do localhost:3000/principal.html do criado po mim ao fim do curso: http://imgur.com/QPYaYnZ

Ambos, apesar de mostrarem a pasta de font diferente, apresentam o mesmo erro (foto enviada no primeiro post, mas o erro é o mesmo): http://imgur.com/FNISUWV

Oi Bruno,

O materialize dá suporte completo ao safari , e você pode até conferir acessando este site de exemplo, http://materializecss.com/templates/starter-template/preview.html , que faz o uso da biblioteca normalmente.

O que me leva a pensar que então o projeto do Alura typer está com algum erro de importação das fontes em algumas versões do Safari.

Vou me basear no gabarito do projeto final, já que ele está com problema também e assim posso fazer os testes aqui com um projeto idêntico ao seu.

Vamos fazer dois testes, o primeiro é mais simples.

Extrai a pasta do alura-typer final na raiz do seu disco C:/

De modo que fique... C:/alura-typer/...

E tente abrir o HTML. Pode ser que o caminho do arquivo com espaços esteja causando algum problema e extraindo na raiz do disco C:/ isso seria eliminado.

Abrindo o código direto de dentro do disco do macintosh: file:///public/principal.html Aparece da mesma forma: http://imgur.com/IEYEXWF

O http://materializecss.com/templates/starter-template/preview.html abriu normalmente aqui.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software