Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa noite,
Ao lado dos títulos de cada página tem um icone, o padrão de largura é 24px, coloquei 100% de altura, já que cada ícone tem uma altura, até ai tudo bem, mas percebi hoje que apenas no Safari (navegador) os icones aparecem com a altura distorcida.
Alguém saberia me dizer como resolver?
Imagem abaixo
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.ramosdesignservidor.com.br/bg/distocida.jpg&key=31e991a5b68efb834d8ff973b0135b1c046fd34f0684404c193f70b7886d4ded" alt="distocida.jpg" />
Alessandro,
Não é de hoje que o Safari tem problemas de renderização com algumas coisas. Tente forçar uma aceleração de hardware com um translatez. Ex.:
body, .ou, .classe {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}Se você for usuário de OSx, também serve a seguinte solução:
body, .ou, .classe {
-webkit-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
osx-font-smoothing: grayscale;
}>
Alessandro,
Não é de hoje que o Safari tem problemas de renderização com algumas coisas. Tente forçar uma aceleração de hardware com um translatez. Ex.:
body, .ou, .classe {
-webkit-transform: translateZ(0px);
transform: translateZ(0px);
}Se você for usuário de OSx, também serve a seguinte solução:
body, .ou, .classe {
-webkit-osx-font-smoothing: grayscale;
-moz-osx-font-smoothing: grayscale;
osx-font-smoothing: grayscale;
}Obrigado Henrique, irei testar!
Eu coloquei no bootstrap.css a class img com height 100%, por isso dá esse erro no Safari, vou tentar lá.
Por quê da imagem ter height: 100%? Assim ela não será responsivo e será forçada a receber uma altura da qual pode não suportar. Para imagens responsivas, o certo é:
img {
width: 100%;
height: auto;
}L. Henrique muito obrigado pela atenção! Deu certo colocando height: auto.
Valeuuuuuuuuuuuu
Problemas com CSS, irei mover o tópico para a área correta!