Interferências de efeitos

[rikaschmitt 54]

Boa tarde galera.

 

Estou enfrentando um problema estranho. Tenho alguns links para as redes sociais com um border-radius e com efeito "hover" de rotação da borda, como na imagem abaixo:

 

 

Quando dou "hover" nesses links das redes sociais, uma div lá em outra parte do site perde seu border-radius.

Exemplo:

 

 

 

Não tenho ideia do que possa estar dando essa interferência, já que cada um teu sua classe.

Alguém sabe?

 

 

 

CSS das redes sociais:

.link-social { width:31px; height:31px; display:inline-block; }
.link-social:before {
display:block; content:""; width:31; height:31px; border:1px #DF9201 solid;
-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;
}
.link-social:hover:before {
border:1px #DF9201 dashed; 
transform:rotate(36000deg); -webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg);
transition: all 500s ease; -webkit-transition: all 500s ease; -moz-transition: all 500s ease; -o-transition: all 500s ease;
}

CSS da div redonda:

.shape-slideshow { width:617px; height:617px; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; overflow:hidden; }

 

[William Bruno 1501]

Posta um link para o site.

Acontece em todos os browsers ?

[rikaschmitt 54]

Posta um link para o site.

Acontece em todos os browsers ?

 

Na verdade no Chrome.

No Mozilla esse efeito nem funciona.

[William Bruno 1501]

Ok, qual o link ?

[rikaschmitt 54]

Ok, qual o link ?

 

 

To rodando na minha máquina.

Não sei se vou conseguir te mandar.

[William Bruno 1501]

Então isola apenas esses 2 elementos, com o html e css correspondente e cola num fiddle da vida e posta aqui.

Sem "vermos" e debugarmos, é impossível ajudar.

[rikaschmitt 54]

Então isola apenas esses 2 elementos, com o html e css correspondente e cola num fiddle da vida e posta aqui.

Sem "vermos" e debugarmos, é impossível ajudar.

 

 

http://jsfiddle.net/rLrqzy4j/

 

Acredito que está tendo conflito com o slider.

[William Bruno 1501]

ok, coisas que eu descobri:

 

-> Sempre que vc declarar propriedades com prefixos, -webkit, -moz.. coloque por último a propriedade sem o prefixo, ficando:

-webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg); transform:rotate(36000deg);

e nunca:

transform:rotate(36000deg); -webkit-transform:rotate(36000deg); -moz-transform:rotate(36000deg);

A ordem importa bastante no css.

 

-> No Firefox está funcionando sim, só que o border-radius "confunde" o dashed ou dotted, e faz com que eles "grudem", ai fica difícil observar o movimento, e a falta de espaços, pq o radius grudou as coisas

 

-> Deve ser algum bug do webkit (no Safari tb acontece)

[rikaschmitt 54]

Valeu William pelos toques.

 

Poisé, estou pesquisando aqui... :\