0

Estou com um problema com CSS. Tentei girar uma imagem com CSS para que ela ficasse de lado, funcionou no Firefox porém no Safari não.

Segue o codigo usado para girar a imagem:

.body-element-p1{
    top: 11%;
    left: 41%;
    position: absolute;
    z-index: 10;
    transform: rotate(180deg);
}

Se tiverem alguma dica estou aceitando.

1 Resposta 1

1

TL;DR

Adicione o prefixo -webkit-.

.body-element-p1{
    top: 11%;
    left: 41%;
    position: absolute;
    z-index: 10;

    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);

    transform: rotate(180deg);
}

Complemento

Esses prefixos foram adicionados às propriedades para que os desenvolvedores pudessem experimenta-las, já que — em teoria — não deveria haver mudança visual.

Os desenvolvedores devem esperar para incluir a propriedade não pré-fixada até que o comportamento do navegador seja padronizado.¹

Segundo o site da Mozilla:

Os fabricantes de browsers estão trabalhando para parar de usar prefixos de fornecedores para recursos experimentais. Os desenvolvedores da Web têm vindo a usá-los em sites de produção, apesar de sua natureza experimental. Isso tornou mais difícil para os fornecedores de navegadores garantir a compatibilidade e trabalhar com novos recursos; também foi prejudicial aos navegadores menores que acabam forçados a adicionar prefixos de outros navegadores para carregar sites populares.

Qual ordem usar?

Na pergunta Ordenar estilos com prefixos no CSS (informada pelo @dvd), não há explicações do por quê você deve usar uma determinada ordem, mas isso acontece pois os navegadores leem essas propriedades na ordem que você colocar. Porém isso é relativo (como mostrado abaixo).

Acontece pois os navegadores utilizam esses prefixos para (como foi dito anteriormente) coisas experimentais e por isso eles processam essas informações de modo diferente. Portanto, você deve verificar qual a melhor forma de utilizar. Exemplos:

Modo Correto:

#rightway { background: #ccc; padding: 30px;
  /* Navegador vai tentar aplica-lo */
  -webkit-border-radius: 30px 10px;

  /* Porém não vai conseguir, pois essa propriedade irá substituir a anterior. */
  border-radius: 30px 10px;
}

Modo Correto ²:

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px 30px 10px;
}

Nos modos corretos o navegador irá interpretar a última propriedade da seguinte maneira:

border-top-left-radius: 30px;
border-top-right-radius: 10px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 10px;

Modo Incorreto:

#wrongway { background: #ccc; padding: 30px; 
  border-radius: 30px 10px;
  -webkit-border-radius: 30px 10px;
}

Nesse modo, o navegador irá substituir a propriedade "real" border-radius, pela propriedade prefixada, porém, a interpretação do navegador será uma borda elíptica. Ex:

border-top-left-radius: 30px 10px;
border-top-right-radius: 30px 10px;
border-bottom-right-radius: 30px 10px;
border-bottom-left-radius: 30px 10px;
3
  • Prefixos devem vir antes. Veja mais aqui nesta pergunta: pt.stackoverflow.com/q/245870/8063
    – Sam
    Commented 13/02/2018 às 0:33
  • @dvd Isso é relativo e pode depender da propriedade e dos valores dela. codepen.io/valdeir2000/pen/bLRLdP Commented 13/02/2018 às 1:24
  • Sim, a regra se aplica quando há 2 valores. Mas para não correr riscos, é sempre melhor colocar os prefixados acima e o não-prefixado por último.
    – Sam
    Commented 13/02/2018 às 1:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .