CSS Animated wavy line not displaying properly in Chrome

Question

I have created a simple animated wavy line to use as a divider on one of my websites. Looks perfect in safari but it displays strange in Chrome.

Here's the safari screenshot:

Here's the chrome screenshot:

The safari one is perfect for me, but it seems chrome isn't liking it.

I have tried adding ALL vendor prefixes to the start of the selectors and various places but I cant seem to fix the issue.

Can anyone please tell me where I'm going wrong?

Here's a CODEPEN and here's a code snippet:

.wavy-line {
  width: 150px;
  height: 50px;
  overflow: hidden;
  margin: 0 auto 0 auto;
}
.wavy-line:before {
  content: attr(data-text);
  position: relative;
  top: -35px;
  color: rgba(0,0,0,0);
  width: calc(100% + 27px);
  font-size: 4em;
  text-decoration-style: wavy;
  text-decoration-color: #25173A;
  text-decoration-line: underline;
  animation: animate .9s linear infinite;
  -webkit-animation: animate .9s linear infinite;
}

@keyframes animate {
  0% { left: -0px; }
  100% { left: -30px;}
}
@-webkit-keyframes animate {
  0% { left: -0px; }
  100% { left: -30px;}
}

.wavy-line-green:before { text-decoration-color: #56AE5F; }
.wavy-line-blue:before { text-decoration-color: #1FB5D1; }
.wavy-line-yellow:before { text-decoration-color: #F9B930; }

user_8620333 · Answer

I will consider a previous answer to draw the waves using CSS and then you can easily animate them. You simply need to adjust the CSS variable to control the shape:

.wave {
  --c:red;   /* Color */
  --t:5px;   /* Thickness */
  --h:50px;  /* Height  */
  --w:120px; /* Width  */
  --p:13px;  /* adjust this to correct the position when changing the other values*/
  
  margin:5px auto;
  width:calc(var(--w)*4);
  height:calc(var(--h) + 10px);
  overflow:hidden;
  position:relative;
}
.wave:before {
  content:"";
  position:absolute;
  padding:5px 0;
  top:0;
  left:0;
  width:200%;
  bottom:0;
  
  background:
    radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
    radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
    
  background-size:var(--w) var(--h);
  background-position:calc(var(--w)/2) calc(-1*(var(--h)/2)),0px calc(var(--h)/2);
  background-repeat:repeat-x;
  background-origin:content-box;
  
  animation:move 3s infinite linear;
}

@keyframes move {
  to {
   transform:translateX(-50%);
  }
}

CSS Animated wavy line not displaying properly in Chrome

1 Answers