CSS weird artifacts when using clip path in conjuction with custom animation-CodePudding

I am currently working on a small website. Since I am not familiar with html / css, I am mostly just trying out a few things. I wanted to get a small rocket flying through space animated using css.

I quickly copied the relevant part of my code to

What solution would there be for my problem? I am very happy for any help.

CodePudding user response：

Like mentioned on the comments, i think this has something to do with the browser. I can't see the problem on Chrome, but i can see it on firefox.

I have created a small example for you, where i have added border: 1px solid black to the .rocket.body.1 element. This seems to fix the problem also on firefox

:root body {
  background-color: #000000;
}

.rocket-div {
  position: relative;
}

.rocket {
  position: absolute;
  animation: shake 10s infinite;
}

.rocket-element {
  position: absolute;
  background-color: white;
}

.rocket-body-1 {
  width: 30px;
  height: 80px;
  left: 0px;
  top: 10px;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  border: 1px solid black;
}

.rocket-body-2 {
  width: 30px;
  height: 100px;
  left: 40px;
}

.rocket-body-3 {
  width: 160px;
  height: 100px;
  left: 80px;
  border-top-right-radius: 80px 50px;
  border-bottom-right-radius: 80px 50px;
}

.rocket-window {
  width: 52px;
  height: 52px;
  left: 160px;
  top: 24px;
  border-radius: 26px;
  background-color: black
}

@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0deg);
  }
  10% {
    transform: translate(-1px, -2px) rotate(-1deg);
  }
  20% {
    transform: translate(-3px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(3px, 2px) rotate(0deg);
  }
  40% {
    transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    transform: translate(3px, 1px) rotate(-1deg);
  }
  80% {
    transform: translate(-1px, -1px) rotate(1deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}

<body>

  <div  style="height: 200px; width: calc(min(500px, 100%));">
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>
</body>