使用stroke-dasharray渲染笔划时的Safari问题

Question

I am animating some strokes belonging to an arrow icon, which works great in all browsers (including IE11), with exception to Safari. For some reason, Safari is rendering small black flecks when stroke dashes are set to 0 in a stroke-dasharray rule. My code is below:

<svg aria-hidden="true" class="icon icon--arrow-right" height="24px" viewbox="0 0 24 24" width="24px">
  <g>
    <path class="stroke stroke--1" d="M4,12 L19.3,12"></path>
    <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>
  </g>
</svg>

.icon {
  stroke: currentColor;
  fill: none;
  shape-rendering: geometricPrecision;
}

.icon--arrow-right .stroke--1 {
  stroke-dasharray: 0 15.29;
  transition: stroke-dasharray 250ms ease-in-out;
}

.icon--arrow-right.active .stroke--1 {
  stroke-dasharray: 15.29 0;
}

.icon--arrow-right .stroke--2 {
  stroke-dasharray: 0 6.5 0 6.5;
  transition: stroke-dasharray 250ms ease-in-out 250ms;
}

.icon--arrow-right.active .stroke--2 {
  stroke-dasharray: 0 0 13 0;
}

Run the snippet below in Safari to recreate the issue.

 var el = document.querySelector('.icon'); el.onclick = function() { el.classList.toggle('active'); } 

 .icon { border: 1px solid currentColor; stroke: currentColor; fill: none; shape-rendering: geometricPrecision; cursor: pointer; } .icon--arrow-right .stroke--1 { stroke-dasharray: 0 15.29; transition: stroke-dasharray 250ms ease-in-out; } .icon--arrow-right.active .stroke--1 { stroke-dasharray: 15.29 0; } .icon--arrow-right .stroke--2 { stroke-dasharray: 0 6.5 0 6.5; transition: stroke-dasharray 250ms ease-in-out 250ms; } .icon--arrow-right.active .stroke--2 { stroke-dasharray: 0 0 13 0; } 

 <p>Click the button below to toggle the <code>.active</code> class.</p> <svg aria-hidden="true" class="icon icon--arrow-right" height="24px" viewbox="0 0 24 24" width="24px"> <g> <path class="stroke stroke--1" d="M4,12 L19.3,12"></path> <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline> </g> </svg> <p>In Safari, you will see black flecks where <code>stroke</code> dash lengths are set to <code>0</code> when the icon is not active. 

Does anyone know why this is happening in Safari, and how to resolve it, so that the black flecks are not visible when a stroke-dash is set to 0 .

Answer 1

Not sure exactly what is the issue here, sounds like Safari doesn't really like all this floating coordinates, but your values also sounds quite weird.

Anyway, using a tiny offset for the first value of the polyline's dash-array then using precise values for others will make Safari happy:

(note that I got these values by using Safari's result from each element's getTotalLength() )

 var el = document.querySelector('.icon'); el.onclick = function() { el.classList.toggle('active'); } 

 .icon { border: 1px solid currentColor; stroke: currentColor; fill: none; shape-rendering: geometricPrecision; cursor: pointer; } .icon--arrow-right .stroke--1 { stroke-dasharray: 0 15.3; transition: stroke-dasharray 250ms ease-in-out; } .icon--arrow-right.active .stroke--1 { stroke-dasharray: 15.3 0; } .icon--arrow-right .stroke--2 { stroke-dasharray: 0.0001 6.003 0.0001 6.003; transition: stroke-dasharray 250ms ease-in-out 250ms; } .icon--arrow-right.active .stroke--2 { stroke-dasharray: 0 0 13 0; } 

 <p>Click the button below to toggle the <code>.active</code> class.</p> <svg aria-hidden="true" class="icon icon--arrow-right" height="240px" viewbox="0 0 24 24" width="240px"> <g> <path class="stroke stroke--1" d="M4,12 L19.3,12"></path> <polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline> </g> </svg> 

Answer 2

I would do this sort of animations by changing the value of the stroke-dashoffset instead of animating the stroke-dasharray value. Please note I've changes the polygon with a path where you move twice to the tip of the arrow. This is fixing the issue you have on Safari.

 var el = document.querySelector('.icon'); el.onclick = function() { el.classList.toggle('active'); } 

 .icon { border: 1px solid currentColor; stroke: currentColor; fill: none; shape-rendering: geometricPrecision; cursor: pointer; } .icon--arrow-right .stroke--1 { stroke-dasharray: 15.3; stroke-dashoffset: 15.3; transition: stroke-dashoffset 250ms ease-in-out; } .icon--arrow-right.active .stroke--1 { stroke-dashoffset: 0; } .icon--arrow-right .stroke--2 { stroke-dasharray: 6.22; stroke-dashoffset: 6.22; transition: stroke-dashoffset 250ms ease-in-out 250ms; } .icon--arrow-right.active .stroke--2 { stroke-dashoffset: 0; } 

 <p>Click the button below to toggle the <code>.active</code> class.</p> <svg aria-hidden="true" class="icon icon--arrow-right" height="240px" viewbox="0 0 24 24" width="240px"> <g> <path class="stroke stroke--1" d="M4,12 L19.3,12"></path> <!--<polyline class="stroke stroke--2" points="15.05 7.76 19.3 12 15.05 16.24"></polyline>--> <path class="stroke stroke--2" d="M19.3,12.3L15.05, 7.76M19.3,11.7L15.05, 16.24" /> </g> </svg> <p>In Safari, you will see black flecks where <code>stroke</code> dash lengths are set to <code>0</code> when the icon is not active.</p>