Entrar Ainda não tem acesso?
5
respostas

Diferentes resultados em diferentes navegadores

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Gradientes e atividade Fundo listrado na home

por Estudante
| 96.8k xp | 11 posts

No meu computador, obtive o efeito desejado no Safari 11.1 e no Firefox 60.0.1.

No Chrome 66.0.3359.181, ele apagou as linhas quando coloquei a propriedade

 background-attachment: fixed

As linhas reapareceram quando substituí por 

-webkit-background-attachment: fixed

mas ainda assim as linhas não ficaram fixas.

5 respostas
por Marco Bruno
| 362.1k xp | 794 posts
Desenvolvedor e Instrutor

Olá, Einstein.

Você pode mandar um print de com está ficando o seu layout?

Você pode adicionar os prints no site https://imgur.com/

por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Einstein,

Bem estranho isso... O chrome suporta essa propriedade há algum tempo.

Consegue verificar se não faltou um ; na hora de colocar a propriedade ou algo do tipo?

Se não for isso, posta o css dessa classe inteira pra gente ver?

por Estudante
| 96.8k xp | 11 posts

Seguem os códigos:

O código abaixo funciona perfeitamente no Safari e no Firefox. No Chrome as linhas nem aparecem.

.blog {
    background-color: #999;
    background-image: linear-gradient(45deg, 
        transparent, 
        transparent 14px, 
        rgba(255, 255, 255, 0.1) 14px, 
        rgba(255, 255, 255, 0.1) 15px, 
        transparent 15px, 
        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
    color: #FFF;
    border-bottom: 0.5rem solid #851944;
    position: relative;
}

Com o código abaixo, as linhas aparecem no Safari e no Firefox mas sem o efeito desejado. As linhas também aparecem no Chrome também sem o efeito desejado.

.blog {
    background-color: #999;
    background-image: linear-gradient(45deg, 
        transparent, 
        transparent 14px, 
        rgba(255, 255, 255, 0.1) 14px, 
        rgba(255, 255, 255, 0.1) 15px, 
        transparent 15px, 
        transparent);
    background-size: 20px 20px;
    -webkit-background-attachment: fixed;
    color: #FFF;
    border-bottom: 0.5rem solid #851944;
    position: relative;
}
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team Desenvolvedor e Instrutor

Oi Einstein,

Vc está usando duas propriedades:

background-attachment: fixed;
-webkit-background-attachment: fixed;

Até onde sei, a propriedade background-attachment não tem prefixos e você não precisa da propriedade -webkit-background-attachment.

Tente deixar apenas a proprieadade background-attachment e fale pra gente se deu certo

PS: o segundo exemplo só tem a propriedade -webkit-background-attachment: fixed; e por isso é esperado que não funcione em nenhum dos navegadores.

por Estudante
| 96.8k xp | 11 posts

Sem o prefixo -webkit-, ou seja, apenas com a propriedade descrita da forma "background-attachment: fixed;", veja o código abaixo, o resultado encontrado foi:

  • Safari: Funciona perfeitamente
  • Firefox: Funciona perfeitamente
  • Chrome as linhas sequer aparecem
    • .blog {
    background-color: #999;
    background-image: linear-gradient(45deg, 
        transparent, 
        transparent 14px, 
        rgba(255, 255, 255, 0.1) 14px, 
        rgba(255, 255, 255, 0.1) 15px, 
        transparent 15px, 
        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
    color: #FFF;
    border-bottom: 0.5rem solid #851944;
    position: relative;
}