Проблема с Safari при рендеринге обводок с использованием обводки - PullRequest
Новая
       51

Проблема с Safari при рендеринге обводок с использованием обводки

0 голосов
/ 17 июня 2019

Я анимирую некоторые штрихи, принадлежащие значку стрелки, который прекрасно работает во всех браузерах (включая IE11), за исключением Safari. По какой-то причине Safari рендерит маленькие черные пятна, когда для черточек stroke установлено 0 в правиле stroke-dasharray. Мой код ниже: 

<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;
}

Запустите приведенный ниже фрагмент в 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: 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.

Кто-нибудь знает, почему это происходит в Safari и как его решить, чтобы черные пятна не были видны, когда для stroke-dash установлено значение 0.

Ответы [ 2 ]

1 голос
/ 18 июня 2019

Не знаю точно, в чем здесь проблема, звучит так, будто Safari не очень нравятся все эти плавающие координаты, но ваши значения также звучат довольно странно.

В любом случае, использование небольшого смещения для первого значения массива черты ломаной линии, а затем использование точных значений для других сделает Safari счастливым:

(обратите внимание, что я получил эти значения, используя результат Safari для каждого элемента 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>
0 голосов
/ 17 июня 2019

Я бы сделал этот вид анимации, изменив значение stroke-dashoffset вместо анимации значения stroke-dasharray. Обратите внимание, что я заменил полигон на путь, по которому вы дважды переходите к кончику стрелки. Это устраняет проблему, возникающую в 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>
...