Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Não coloquei background-size: 25% 100%; e nem background-repeat: no-repeat; e funcionou!

Gostaria de saber se alguma prática nesse código que fiz geraria algum possível erro no futuro, já que o resultado foi igual. Segue o código css:

.rodape-pagina {
    background-image: radial-gradient(ellipse at left bottom,
    rgba(60, 29, 61, 0.8),
    rgba(60, 29, 61, 0.8) 65%,
    black 65%,
    black 70%,
    transparent 70%,
    transparent);    
    color: #F2FFFC;
    padding: 1em;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 25%;    
    box-sizing: border-box;
}
1 resposta
solução!

Olá Leonardo, o

background-repeat: no repeat

evita que caso caiba, a imagem seja renderizada mais de uma vez na tela. O size 100% faz com que seu background ocupe toda a altura do elemento, porém o 25% diz que ele só vai ocupar 1/4 da largura, talvez sobre espaço lateral para ele ser renderizado mais 4 vezes lateralmente.

Por isso, apesar de esse exemplo ser talvez um corner case que funcionou por causa do que foi desenhado com o radial-gradiente, pode ser uma boa prática sempre especificar certinho no seu css.

Vale lembrar que não colocar algumas dessas opções e deixar essas decisões para o browser pode fazer com que navegadores diferentes renderizem sua página de forma diferente.

Você experimentou abrir em outro navegador para ver se ainda funcionava?

Me avisa se tiver ficado claro (ou não). (:

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