tazo todua tazo todua - 2 months ago 16
CSS Question

Mouseover/hover bug using Rotate (endless rotation) in Firefox

I face such problem:

Mouseover on the right side, where the word

heree
is and you will get endless spinning (i use Firefox).

How to solve this?



button{
transition: 0.5s all;
transform:none;
}

button:hover{
transform:rotateY(360deg) scale(1.4);
margin:5px;
}

<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>





P.S. If I remove
margin
parameter, then it works ok. But i want margin too!

Answer

I believe this is because of all transition.

Set it only for the transform and I guess the issue is resolved here- in Firefox maybe the combination of scaling and margin on hover of the button is causing the issue.

button{
  transition: 0.5s transform;
  transform:none;
}

button:hover{
   transform:rotateY(360deg) scale(1.4);
  margin:5px;
}
<button id="mybutton" >sumbittttttttttttttttttttt heree!</button>

Let me know your feedback on this.Thanks!