CSS transform rotate pixel issue in firefox

Question

I'm trying to create swing button with transform rotate property , It's works fine in opera and chrome browsers but in firefox its create weird pixel issue in the border of the button:

My css code for button & swing keyframes

.RedButton {
  background-color: #bc0000;
  border-radius: 7px;
  border: 1px solid #bc0000;
  display: inline-block;
  cursor: pointer;
  color: #fff !important;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  padding: 7px 24px;
  text-decoration: none;
  margin-top: 15px;
  animation: swing 5s infinite;
  -moz-animation: swing 5s infinite;
  transition: 0.2s;
  -moz-transition: 0.2s;
}

@-moz-keyframes swing {
  20%,
  60% {
    -moz-transform: rotate(5deg);
  }
  40%,
  80% {
    -moz-transform: rotate(-5deg);
  }

  100% {
    -moz-transform: rotate(0deg);
  }
}

@keyframes swing {
  20%,
  60% {
    transform: rotate(5deg);
  }
  40%,
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

<div class="RedButton">Get Started Now!</div>

Am i missing something ?

I have try your code it's all ok [Photo](https://ibb.co/Qrxt7Zb) - Firefox 77.0.1 - Win 10 — Simone Rossaini, Jun 29 '20 at 09:26
May be helpful to add the version of Firefox you are running on and your OS ;) — geauser, Jun 29 '20 at 09:29
@SimoneRossaini I'm using the exact same FF version as yours, but the anti- aliasing looks horrible (just like OP's): https://i.imgur.com/Gr8GDAf.mp4 — Terry, Jun 29 '20 at 09:30

score 5 · Accepted Answer · answered Jun 29 '20 at 09:28

5

adding a tiny shadow make it look better:

.RedButton {
  background-color: #bc0000;
  border-radius: 7px;
  border: 1px solid #bc0000;
  display: inline-block;
  cursor: pointer;
  color: #fff ;
  font-family: Arial;
  font-size: 30px;
  font-weight: bold;
  padding: 7px 24px;
  text-decoration: none;
  margin-top: 15px;
  animation: swing 5s infinite;
  box-shadow: 0 0 1px #bc0000;
}


@keyframes swing {
  20%,
  60% {
    transform: rotate(5deg);
  }
  40%,
  80% {
    transform: rotate(-5deg);
  }
}

<div class="RedButton">Get Started Now!</div>

answered Jun 29 '20 at 09:28

Temani Afif

245,468
26
309
415

Not 100% fixed but make it much much better , tnx mate! – domi kp Jun 29 '20 at 10:50
@domikp you can still increase it a little more (2px) – Temani Afif Jun 29 '20 at 10:51
Yep i know , tnx Bro ! – domi kp Jun 29 '20 at 11:23

geauser · Answer 2 · 2020-06-29T09:40:36.307

-1

backface-visibility seems to do the work according to this SO thread: css transform, jagged edges in chrome

.RedButton {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   backface-visibility: hidden;
   // ...
}

If this does not work, try: outline: 1px solid transparent;

edited Jun 29 '20 at 09:40

answered Jun 29 '20 at 09:26

geauser

1,005
8
20

did you try it? also the question you linked is about Chrome and no Firefox – Temani Afif Jun 29 '20 at 09:35
In the thread people talk about having this issue on Firefox @TemaniAfif – geauser Jun 29 '20 at 09:38
1

@geauser , not working , but box-shadow make it much better. tnx for your answer. – domi kp Jun 29 '20 at 10:50

CSS transform rotate pixel issue in firefox

2 Answers2