Использование идентификаторов фрагментов SVG для фоновых изображений в CSS с Microsoft Edge 42 (17134) - PullRequest
Новая
       35

Использование идентификаторов фрагментов SVG для фоновых изображений в CSS с Microsoft Edge 42 (17134)

0 голосов
/ 06 июня 2018

Идентификаторы фрагментов для изображений SVG, используемых для работы в Microsoft Edge (известные проблемы в Safari).При использовании одного и того же стека SVG на одной и той же странице несколько раз (не менее 2 раз) в последней сборке Edge ( Microsoft Edge 42 Build 17134 ) всегда отображается один и тот же идентификатор идентификатора фрагмента Image.

Проблема может быть воспроизведена при использовании упомянутого браузера (перезагрузите страницу несколько раз, и отображаемая иконка может измениться, но всегда одинакова для всех трех икон в следующем примере (может быть воспроизведена с любым стеком svg):

Example by Chris Coyier (found at codepen.io) https://codepen.io/chriscoyier/pen/GndhE

HTML 

<h3>background-image with #fragment referencing &lt;view></h3>

<span class="icon icon-clock"></span>
<span class="icon icon-heart"></span>
<span class="icon icon-arrow-right"></span>

CSS 

.icon {
  display: inline-block;
  width: 32px;
  height: 32px;
}

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg#icon-arrow-right-view) no-repeat;
}

Также сообщается о проблеме здесь: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17787431/

Кто-нибудь знает обходной путь для этой проблемы, который может быть реализован как исправление (CSS или JS) без полного изменения рендеринга

1 Ответ

0 голосов
/ 06 июня 2018

ОБНОВЛЕНИЕ: Один из возможных обходных путей - заменить * .svg на * .svg? Что угодно.Одним из основных недостатков этого обходного пути является то, что все преимущества производительности / кэширования теряются.

обновленный пример: https://codepen.io/jbeargraphics/pen/wXWQLo 

.icon-clock {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?1#icon-clock-view) no-repeat;
}

.icon-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?2#icon-heart-view) no-repeat;
}

.icon-arrow-right {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/fragment-ready-4.svg?3#icon-arrow-right-view) no-repeat;
}

Это только быстрое исправление (но работает).Все еще ищу лучший обходной путь.

РЕДАКТИРОВАТЬ: Это необязательный обходной путь, а не удовлетворительный ответ на проблему.

...